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内 容 简 介 


本 书 内 容 系 统 全 面 ,在 技术 上 引入 了 HTML 和 CSS 最 新 版 本 内 容 , 详 细 介绍 了 HTML5 和 CSS3 
的 各 项 新 功能 .新 特性 。 所 有 知识 点 都 紧 跟 HTML5 与 CSS3 的 最 新 发 展 动态 ,包括 HTML5 新 引入 的 
元 素 、 属 性 介绍 .Canvas 介绍 、 本 地 存储 等 ,CSS3 的 新 属性 介绍 .CSS 特效 和 动画 制作 、 盒 子 模 型 等 内 容 。 

本 书 以 项 目 实战 为 主 , 以 项 目 为 导 引 ,包含 42 个 单元 项 目 案例 ,每 个 单元 知识 点 都 配 以 精心 设计 的 
项 目 案例 来 讲解 ,并 有 扩展 运用 的 部 分 。 在 每 章 结尾 ,使 用 本 章 知 识 点 完成 课程 综合 项 目的 一 个 模块 ， 
便于 读者 循序 渐进 地 完成 最 后 的 综合 项 目 。 

最 后 的 综合 项 目 案例 是 一 个 较 完 整 的 综合 性 Web 界面 开发 项 目 , 体 现 了 用 HTML5 与 CSS3 开发 
Web 页 面 的 思维 和 方法 。 本 书 可 以 满足 初学 者 全 面 而 系统 地 学 习 理 论 知识 的 需求 ,还 能 满足 充分 实践 
的 需求 。 

本 书 适用 于 计算 机 专业 的 “HTML5 前 端 开发 人 机 交互 设计 ”“ 网 页 设计 与 开发 ”课程 教学 。 
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产品 编号 : 081728-01 


“HTML5 前 端 开 发 ”课程 在 高 等 院 校 的 开设 比较 普遍 ,虽然 课程 名 称 不 统一 ,但 是 很 
多 专业 都 在 教授 相关 课程 。 计 算 机 专业 的 院 系 一 般 都 开设 了 HTML5 前 端 课 程 。 随 着 
技术 的 不 断 更 新 ,网 页 的 动态 更 新 由 服务 端 走向 客户 端 ,静态 网 页 被 动态 网 页 取代 ,实现 
客户 端 动态 的 JavaScript 技术 成 为 重 中 之 重 。 引 入 软件 企业 项 目 开发 采用 的 技术 和 开发 
工具 也 为 前 端 课程 的 开设 范围 和 方向 提供 了 建设 性 意见 。 我 们 认为 前 端 课程 应 该 以 
HTML5、CSS3 和 JavaScript 等 相关 技术 为 主线 ,配合 案例 和 源 代码 ,使 知识 讲解 与 实践 
相 结合 ,从 简便 易 行 的 开发 工具 HBuilder 入 门 ,深入 网 页 跨 平 台 移 动 开 发 等 方面 ,全 面 培 
养 学 生 的 HTML5 前 端 开发 能 力 。 

本 书 以 HTML5、CSS3 和 JavaScript 等 相关 技术 为 主线 ,在 整个 知识 体系 讲授 过 程 
中 贯穿 一 个 完整 的 Web 前 端 开发 项 目 案例 。 在 理论 内 容 讲 解 和 单元 项 目 案例 实现 的 过 
程 中 ,结合 具体 知识 点 讲解 HTML 和 CSS 的 基本 语法 、 主 要 标签 和 属性 作用 、JavaScript 
基本 诸 法 和 对 象 的 使 用 、 函 数 和 事件 处 理 等 内 容 , 并 在 掌握 了 每 一 章 的 理论 内 容 和 单元 项 
目 实现 过 程 的 基础 之 上 ,完成 对 课程 综合 项 目 中 相应 模块 的 实现 ,从 而 综合 应 用 所 学 技术 
加 深 对 各 章 知识 点 的 理解 ,提高 运用 技术 的 熟练 程度 。 本 书 每 个 章节 都 配 有 习题 和 实验 ， 
是 一 本 集 理论 知识 .实验 项 目 和 课 后 习题 为 一 体 的 综合 性 图 书 。 

本 书 既 可 作为 高 校本 、 专 科 相关 专业 学 生 的 课程 用 书 ,也 可 作为 自学 人 员 的 参考 资 
料 ,适合 师 生 共同 使 用 ,满足 一 个 学 期 64 学 时 的 教学 安排 。 

本 书 的 基本 结构 与 内 容 组 织 如 下 。 


一 、 本 书 的 基本 信息 
1. 适用 对 象 


本 书 适用 于 计算 机 专业 的 “HTML5 前 端 开发 人 机 交互 设计 ”“ 网 页 设计 与 开发 " 课 
程 教学 。 


2. 具备 的 知识 和 能 力 基 础 











本 书 适用 于 HTML .CSS 和 JavaScript 的 零 基 础 初学 者 以 及 具备 基本 的 网 页 开发 能 
力 . 了解 HTML 和 CSS 基本 语法 、 需 要 进一步 深入 学 习 HTML5 和 CSS3 新 特性 的 前 端 
页 面 开 发 人 员 。 使 用 本 书 的 读者 需要 具备 最 基本 的 计算 机 基础 知识 和 计算 机 操作 能 力 ， 
同时 也 需要 具备 一 定 的 网 页 基础 知识 理解 能 力 。 和 希望 从 事前 端 页 面 开发 工作 的 所 有 学 生 
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均 可 使 用 本 书 。 
3. 预期 学 习 效 果 


学 习 本 门 课 程 之 后 ,将 为 后 续 的 课程 葛 定 基本 的 Web 页 面 开发 基础 能 力 。 

通过 学 习 , 应 熟练 使 用 CSS .JavaScript HTML5 等 技术 完成 界面 设计 和 制作 ,熟悉 
HBuilder 等 开发 工具 ,能 够 快速 搭建 Web 项 目 , 实 现 页 面 动画 效果 、 用 户 交 互 和 异步 更 
新 等 。 通 过 HBuilder 集成 开发 环境 ,能 够 建立 移动 App 项 目 , 熟 悉 项 目 调试 .打包 和 
发 布 。 

4. 本 书 的 编写 团队 


本 书 由 具备 数 年 “人 机 交互 设计 ”网 页 设计 与 开发 "等 课程 讲授 经 验 ,并 具备 使 用 
HTML、CSS 和 JavaScript 等 技术 进行 过 实际 项 目 开发 经 验 的 教师 编写 ,编者 教学 经 验 丰 
富 ,对 Web 页 面 开 发 技术 具有 较 丰 富 的 实践 经 验 和 深入 的 研究 。 

本 书 第 1.2.6、7、8 童 由 刘 营 编写 ,第 4、5 章 由 严 凤 龙 编写 ,第 3.9 一 11 章 由 刘 冰 月 编 
写 , 第 12 一 14 章 由 兰 艳 编写 。 全 书 由 刘 蕾 负责 统 稿 。 本 书 编者 均 为 相关 课程 的 教学 一 线 
教师 , 书 中 的 内 容 都 是 多 年 实际 教学 实践 的 积累 , 虽 经 过 编写 团队 教师 多 次 集体 讨论 、 修 
改 、 补 充 和 完善 ,但 错漏 之 处 仍 在 所 难免 , 敬 请 读者 批评 指正 。 


5. 本 书 教材 将 色 


本 书 内 容 较 为 系统 全 面 , 在 技术 上 引入 了 HTML 和 CSS 最 新 版 本 内 容 ,详细 介绍 了 
HTML5 和 CSS3 的 各 项 新 功能 、 新 特性 。 所 有 知识 点 都 紧 跟 HTML5 与 CSS3 的 最 新 发 
展 动态 ,包括 HTML5 新 引入 的 元 素 、 属 性 介绍 .Canvas 介绍 、 本 地 存储 等 ,CSS3 的 新 属 
性 介绍 .CSS 特效 和 动画 制作 .盒子 模型 等 内 容 。 

本 书 以 项 目 实战 为 主 ,以 项 目 为 导 引 ,包含 42 个 单元 项 目 案例 ,每 个 单元 知识 点 都 配 
以 精心 设计 的 项 目 案例 讲解 ,并 有 扩展 运用 的 部 分 。 每 一 章 结尾 均 设 计 了 使 用 本 章 知 识 
点 完成 课程 综合 项 目的 一 个 模块 ,便于 读者 循序 渐进 地 完成 最 后 的 综合 项 目 。 

最 后 的 综合 项 目 案例 是 一 个 较 完 整 的 综合 性 Web 界面 开发 项 目 ,体现 了 用 HTML5 
与 CSS3 开发 Web 页 面 的 思维 和 方法 。 本 书 可 以 满足 初学 者 全 面 而 系统 地 学 习 理论 知 
识 的 需求 ,还 能 满足 充分 实践 的 需求 。 

本 书 针对 教师 授课 需求 和 学 生 学 习 需 求 , 提 供 完 整 的 立体 化 教学 解决 方案 。 本 书 从 
需要 讲授 的 主体 知识 出 发 ,提供 配套 的 项 目 案例 及 案例 分 析 、 案 例 源 代码 、 课 后 习题 .案例 
库 .课件 ,课程 辅助 教学 网 站 等 多 种 教学 资源 ,以 最 大 限度 地 满足 课程 授课 需求 ,提高 教学 
和 学 习 质 量 ,促进 教学 改革 的 实施 。 


二 、 本 书 的 基本 结构 与 内 容 组 织 
1. 本 书 的 基本 结构 
本 书 遵循 TOPCARES-CDIO 教学 理念 和 工程 教育 思想 ,坚持 以 案例 为 引导 、 以 项 目 


I 


前 证 


为 载体 、 用 项 目 驱 动 教学 的 模式 ,在 每 一 章 每 一 节 均 使 用 实际 的 单元 项 目 案例 讲解 知识 
点 ,基于 构思 ,设计 实施、 运行 的 背景 ,通过 实现 具体 的 案例 对 其 中 涉及 的 知识 点 进行 学 
习 和 强化 ,并 在 知识 运用 部 分 进行 知识 点 的 扩展 使 用 和 技能 提升 训练 。 读 者 在 案例 分 析 、 
项 目 实践 的 过 程 中 ,提高 对 知识 掌握 和 技术 运用 的 熟练 程度 以 及 提升 创新 实践 能 力 。 全 
书 共 分 为 14 章 。 

第 1 章 介 绍 开发 工具 HBuilder, 使 初学 者 快速 上 手 。 

第 2 章 是 HTML 基础 ,主要 介绍 HTML 的 基本 语法 .常用 标签 和 重点 元 素 的 使 用 。 

第 3 章 是 HTML5 新 增 元 素 和 属性 ,主要 介绍 HTML5 中 新 增 的 元 素 和 属性 的 含义 
和 使 用 ,包括 新 增 的 包含 语义 信息 的 文档 结构 元 素 和 新 增 的 表单 元 素 。 

第 4 章 是 CSS 基础 ,主要 介绍 CSS 的 基本 请 法、 选择 符 的 作用 和 使 用 、 常 用 属性 的 使 
用 和 样式 的 定义 。 

第 5 章 是 CSS 盒子 模型 ,主要 介绍 CSS 的 盒子 模型 的 常用 属性 ,浮动 定位 和 位 置 定 
位 、display 属性 的 使 用 。 

第 6 章 是 CSS3 动画 ,主要 介绍 CSS3 中 新 引入 的 动画 效果 的 实现 ,包括 Animation 
动画 实现 和 Transition 过 渡 效 果实 现 。 

第 7 一 9 章 是 JavaScript 基础 ,主要 介绍 JavaScript 的 语法 规则 、JavaScript 函数 定 
义 、 事 件 和 事件 处 理 、 内 置 对 象 .BOM 对 象 和 DOM 对 象 的 常用 属性 和 方法 的 使 用 。 

第 10 章 是 Canvas 画布 ,主要 介绍 HTML5 中 新 增 的 Canvas 元 素 的 使 用 ,包括 利用 
Canvas 绘制 基本 图 形 .绘制 图 像 以 及 Canvas 动画 的 实现 。 

第 11 章 是 本 地 存储 ,主要 介绍 HTML5 中 新 增 的 本 地 存储 技术 ,包括 Web Storage 
和 本 地 数据 库 的 使 用 。 

第 12 章 是 jQuery 基础 知识 讲解 ,同时 介绍 JSON 数据 结构 和 Ajax 的 使 用 方法 。 

第 13 章 讲 解 如 何 利用 HBuilder 工具 建立 .打包 和 发 布 移动 App 项 目 。 

第 14 章 是 网 站 综合 设计 ,主要 介绍 一 个 综合 完整 的 咖啡 销售 网 站 的 页 面 设 计 和 开 
发 ,使 用 之 前 所 学 的 HTML、CSS 和 JavaScript 以 及 HTML5 和 CSS3 的 新 特性 等 技术 ， 
进行 一 个 较 综合 的 Web 网 站 页 面 设计 开发 。 

本 书 的 各 单元 内 容 的 逻辑 关系 图 如 下 页 图 所 示 。 

本 书 重点 介绍 了 HTML CSS 和 JavaScript 3 种 技术 ,它们 之 间 的 关系 是 :HTML 主 
要 负责 定义 Web 页 面 结构 ,CSS 主要 负责 修饰 和 格式 化 页 面 效果 ,JavaScript 是 一 种 解 
释 型 脚本 语言 ,主要 负责 为 Web 页 面 添加 动态 功能 和 交互 行为 .提供 更 美观 流畅 和 丰富 
的 浏览 效果 。 前 端 页 面 开 发 主要 涉及 的 技术 就 是 以 上 3 种 .本 书 将 着 重 介绍 这 3 种 技术 
的 基本 语法 、 常 用 标签 使 用 和 各 种 新 特性 的 应 用 。 

本 书 在 编写 时 较 注重 实用 性 和 实践 性 ,全 书包 含 42 个 单元 项 目 案例 ,每 个 单元 的 知 
识 点 都 配 以 精心 设计 的 项 目 案 例 讲 解 并 包含 知识 的 扩展 运用 部 分 。 课 程 综合 项 目 是 一 个 
较 完整 的 综合 性 Web 页 面 开发 项 目 , 体 现 了 使 用 HTML5 与 CSS3 开发 Web 页 面 的 思 
维和 方法 。 本 书 可 以 满足 初学 者 全 面 而 系统 地 学 习 理 论 知识 的 需求 ,还 能 满足 充分 实践 
的 需求 。 
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2. 本 书 的 内 容 组 织 


本 书 每 章 的 内 容 组 织 形式 如 下 。 

本 章 概 述 :对 本 章 主要 内 容 进行 介绍 。 

学 习 重 点 与 难点 :指出 本 章 的 重要 知识 点 和 学 习 难 点 ,在 教学 过 程 中 应 有 所 侧重 。 
知识 单元 正文 :对 本 章 要 实现 的 项 目 案例 涉及 的 知识 点 进行 系统 讲解 。 


刘 车 
2018 年 11 月 
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咖啡 商城 项 目 导 引 


学 习 目标 


现 阶段 ,Web 前 端 开 发 工程 师 是 一 个 较 新 并 且 需 求 量 较 大 的 职位 ,在 国际 和 国内 的 
Web 开发 相关 领域 中 也 日 益 受 到 重视 ,从 事前 端 开 发 的 程序 员 越 来 越 多 。 对 于 Web 前 
端 开发 人 员 来 说 ,目前 主要 需要 掌握 的 技术 包括 HTML、CSS 和 JavaScript。 随 着 富 互联 
网 应 用 (Rich Internet Applications,RIA) 的 流行 和 普及 ,Flash/Flex、Silverlight、XML 和 
服务 器 端 语言 也 是 Web 前 端 开 发 工程 师 应 该 掌握 的 。 

在 互联 网 的 演化 进程 中 ,Web 1.0 时 代 的 网 站 主要 以 静态 内 容 为 主 ,用 户 使 用 网 站 时 
也 以 浏览 为 主 。 进 入 到 Web 2.0 时 代 以 后 ,各 种 媲美 于 桌面 应 用 程序 的 Web 应 用 大 量 
涌现 ,网 站 的 展示 和 呈现 方式 也 发 生 了 根本 的 变化 。 网 页 不 再 只 是 由 静态 的 .单一 的 文字 
和 图 片 构成 ,而 是 包含 了 各 种 各 样 丰 富 的 多 媒体 资源 和 动态 功能 ,这 使 得 网 页 的 内 容 更 加 
生动 效果 更 加 炫丽 、 操 作 也 越 来 越 智 能 化 和 人 性 化 .网 页 上 丰富 多 样 、 智 能 友好 的 交互 形 
式 为 用 户 提供 了 更 好 的 使 用 体验 ,而 这 些 都 是 基于 Web 前 端 开发 技术 实现 的 。 

本 书 以 HTML5、CSS3 和 JavaScript 等 相关 技术 为 主线 ,在 整个 知识 体系 讲授 期 间 
贯穿 一 个 完整 的 Web 前 端 开发 项 目 案例 一 一 咖啡 销售 网 站 。 本 书 在 理论 内 容 讲 解 和 单 
元 项 目 案 例 实现 的 过 程 中 ,结合 具体 知识 点 讲解 了 HTML 和 CSS 的 基本 请 法 .主要 标签 
和 属性 作用 、 新 规范 中 引入 的 新 特性 、JavaScript 基本 语法 和 常用 对 象 的 使 用 、 函 数 和 事 
件 处 理 等 内 容 , 并 在 掌握 了 每 一 章 的 理论 内 容 和 单元 项 目 实现 过 程 的 基础 之 上 ,完成 对 课 
程 综合 项 目 中 相应 模块 的 实现 ,从 而 综合 应 用 所 学 技术 加 深 对 各 章 知 识 点 的 理解 ,提高 运 
用 技术 的 熟练 程度 。 本 书 从 初步 的 语法 介绍 到 单元 项 目 实现 、 到 综合 项 目 各 模块 实现 、 到 
最 后 的 完整 的 综合 项 目 开发 ,一步 一 步 循 序 渐 进 地 向 读者 介绍 了 Web 前 端 开发 过 程 中 需 
要 使 用 到 的 相关 知识 ,引导 读者 完成 综合 项 目 案例 功能 的 开发 ,最 终 提高 读者 的 Web 前 
端 开发 能 力 。 

通过 学 习 , 能 够 掌握 以 下 Web 前 端 开 发 技能 : 

(1) HTML 基本 语法 和 常用 标签 的 使 用 。 

(2) CSS 基本 语法 和 常用 属性 的 含义 。 

(3) HTML5 新 增 元 素 和 属性 的 含义 和 使 用 。 

(4) HTML5 中 Canvas、 本 地 存储 的 使 用 等 。 
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(5) CSS3 新 特性 ,如 CSS3 动画 等 。 

(6) JavaScript 基本 语法 和 常用 对 象 .方法 的 使 用 。 
(7) JavaScript 函数 定义 和 事件 处 理 。 

(8) 开发 基于 HTML5 十 的 移动 App。 

(9) 了 解 App 产品 打包 、 发 布 的 过 程 。 


内 容 安 排 


本 书 共 14 章 。 

第 1 章 介绍 了 目前 流行 的 前 端 开 发 工具 HBuilder, 使 初学 者 快速 上 手 。 

第 2 章 是 HTML 基础 ,主要 介绍 HTML 的 基本 语法 、 常 用 标签 和 重点 元 素 的 使 用 。 

第 3 章 是 对 HTML5 规范 中 新 引入 的 元 素 和 特性 进行 介绍 。 首 先 介绍 了 HTML5 
新 增 元 素 和 属性 ,主要 包括 HTML5 中 新 增 的 元 素 和 属性 的 含义 和 使 用 ,如 新 增 的 包含 
语义 信息 的 文档 结构 元 素 和 新 增 的 表单 元 素 等 。 

第 4 一 6 章 主 要 介绍 CSS 的 使 用 ,分 别 介绍 了 CSS 的 基本 语法 .选择 符 的 作用 和 使 
用 、 常 用 属性 的 使 用 和 样式 的 定义 。 在 此 基础 之 上 ,还 讲解 了 CSS 的 盒子 模型 的 常用 属 
性 浮动 定位 和 位 置 定位 ,display 属性 的 使 用 。 另 外 ,还 介绍 了 CSS3 中 新 引入 的 动画 效 
果 的 实现 ,包括 Animation 动画 实现 和 Transition 过 渡 效 果实 现 。 

第 7 一 9 章 介 绍 了 JavaScript 基础 ,主要 介绍 JavaScript 的 基本 语法 JavaScript 函数 
定义 .事件 和 事件 处 理 、 内 置 对 象 .BOM 对 象 和 DOM 对 象 的 常用 属性 和 方法 的 使 用 。 

第 10 章 讲解 了 HTML5 中 新 引入 的 Canvas 画布 元 素 , 主要 介绍 Canvas 元 素 的 使 
用 ,包括 利用 Canvas 绘制 基本 图 形 .绘制 图 像 以 及 Canvas 动画 的 实现 。 

第 11 章 介绍 HTML5 中 新 增 的 本 地 存储 技术 ,包括 Web Storage 和 本 地 数据 库 的 
使 用 。 

第 12 章 讲解 jQuery 的 基础 语法 ,同时 介绍 JSON 数据 结构 和 Ajax 的 使 用 方法 。 

第 13 章 讲解 了 如 何 利用 HBuilder 工具 建立 .打包 和 发 布 移动 App 项 目 。 

最 后 ,第 14 章 讲解 了 贯穿 全 书 的 综合 项 目 案例 ,主要 介绍 了 一 个 综合 的 完整 的 咖啡 
销售 网 站 的 页 面 设 计 和 开发 ,使 用 到 之 前 所 学 的 HTML、CSS 和 JavaScript 以 及 HTML5 
和 CSS3 的 新 特性 等 技术 ,进行 一 个 较 综合 的 Web 网 站 页 面 设计 开发 。 


项 目 背 景 


电子 商务 自 1999 年 在 中 国 出 现 之 后 ,已 经 取得 了 突飞猛进 的 发 展 。 电 子 商 务 项 目 潜 
力 巨 大 ,从 管理 方式 \ 经 营 理念 ,经 营 模 式 、 政 策 倾向 等 方面 ,都 具备 传统 商务 模式 无 法 比 
拟 的 优势 。 商 家 可 以 通过 电子 商务 平台 提供 产品 展示 、 产 品 宣传 .网 上 交易 和 支付 管理 等 
方面 的 全 程 服务 , 越 来 越 多 的 商家 通过 企业 电子 商务 平台 的 建设 ,将 买 家 和 卖家 、 厂 商 和 
合作 伙伴 紧密 地 结合 在 一 起 ,消除 时 间 与 空间 障碍 ,大 大 节约 了 交易 成 本 ,扩大 了 交易 
范围 。 














玖 坤 册 吉 丽 同 忆 人 司 


基于 国内 现今 电子 商务 平台 蓬勃 发 展 的 现状 和 线 上 经 营销 售 模式 日 益 成 熟 并 逐渐 占 
据 主导 地 位 的 发 展 状况 ,为 适应 目前 销售 模式 的 时 代 性 变革 ,公司 提出 了 建设 网 络 平台 ， 
提供 在 线 销 售 咖啡 产品 的 需求 。 

本 项 目 结合 真实 需求 , 拟 开发 一 套 可 供 实 际 应 用 并 最 终 上 线 运 行 的 B2C 在 线 咖啡 销 
售 系统 。 本 项 目 无 论 从 实际 市 场 应 用 价值 ,还 是 积累 实际 项 目 开 发 经 验 以 及 学 习 前 沿 开 
发 技术 等 方面 ,都 具备 积极 正面 的 意义 。 

本 项 目 后 台 开 发 可 以 使 用 Java Web 相关 技术 ,主要 负责 向 客户 端 Web 浏览 器 和 客 
户 端 手机 App 等 终端 程序 提供 后 台数 据 。 前 端 开发 主要 包括 C/S 模式 的 手机 端 App 应 
用 软件 开发 和 B/S 模式 的 网 站 前 端 Web 页 面 开发 。 本 书 完成 的 正 是 网 站 前 端 Web 页 面 
开发 的 工作 。 针 对 项 目 需求 ,提供 一 套 完整 的 前 端 Web 页 面 开发 解决 方案 。 


项 目 构思 








1， 内 容 构 思 


为 了 明确 项 目 开 发 风险 及 所 带 来 的 开发 效益 ,并 确定 项 目 是 否 可 行 ,为 接 下 来 的 需求 
分 析 葛 定 基础 ,在 此 对 项 目的 实现 内 容 进 行 初步 构思 。 

本 项 目 内 容 为 咖啡 在 线 销售 系统 前 端 页 面 的 设计 和 开发 ,主要 涵盖 以 下 几 方 面 的 
世相 

(1) 网 站 首页 设计 ,包括 首页 内 容 和 布局 结构 。 

(2) 网 站 栏目 及 子 栏目 设计 ,包括 栏目 、 子 栏目 内 容 和 栏目 布局 结构 。 

(3) 网 站 logo 图 标 设 计 。 

(4) 网 站 导航 设计 。 

(5) 网 站 页 脚 设计 。 

(6) 网 站 各 主要 页 面 内 容 设 计 。 

项 目的 主要 页 面包 括 以 下 几 部 分 。 

(1) 商城 首页 。 

(2) 商品 详情 页 面 。 

(3) 购物 车 页 面 。 

(4) 我 的 订单 页 面 。 

其 中 : 

(1) 商城 首页 包括 网 站 导航 区 、 商 品 分 类 区 、 商 品 展示 区 、 新 闻 广 告 区 和 页 脚 区 等 
部 分 。 

(2) 商品 详情 页 面包 括 导航 区 、 商 品 购 买 区 、 热 卖 商 品 排行 榜 、 商 品 详细 信息 显示 区 

(3) 购物 车 页 面包 括 导 航 区 、 购 物 车 商品 信息 区 等 部 分 。 

(4) 我 的 订单 页 面包 括 导航 区 、 链 接 区 、 订 单 信息 显示 区 等 部 分 。 
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2 技术 构思 


关于 项 目 中 涉及 的 动态 效果 运用 到 的 实现 技术 ,主要 构思 如 下 。 

(1) 商城 首页 。 

@ 使 用 DIV 二 CSS 实现 网 页 布局 ,所 有 文字 和 段落 样式 .背景 和 边框 .导航 栏 样式 都 
由 CSS 实现 。 

@ 使 用 JavaScript 实现 商品 说 明文 字 的 显示 和 隐藏 功能 。 

@ 在 广告 栏 上 做 图 片 动态 轮 播 效果 ,可 以 使 用 JavaScript 实现 。 

@ 使 用 HTML5 新 增 的 二 video 二 标签 插入 MP4 格式 的 视频 文件 。 

(2) 商品 详情 页 面 。 

QO@ 商品 购买 区 中 的 根据 选中 的 商品 缩 略图 切换 商品 大 图 功能 ,可 以 使 用 JavaScript 
的 onmousemove 事件 处 理 函 数 响应 鼠标 行为 ,使 用 HTML5 中 的 Canvas 进行 图 像 绘制 。 

@ 商品 购买 区 中 的 商品 大 图 区 域 ,可 以 使 用 HTML5 的 Canvas 进行 图 像 剪 裁 、. 放 大 
和 重 绘 ,实现 图 片 放大 镜 功 能 。 

@ 商品 购买 区 中 的 “加 入 购物 车 ”功能 .可 以 使 用 HTML5 的 本 地 数据 库存 储 购物 车 
中 的 商品 信息 。 

(3) 购物 车 页 面 。 

O@ 购物 车 页 面 加 载 时 , 读 取 本 地 数据 库 中 存放 的 购物 车 表 中 的 所 有 内 容 , 列 表 显 示 
在 购物 车 页 面 中 。 

@ 购物 车 页 面 的 商品 信息 区 的 “删除 ?功能 ,对 本 地 数据 库 的 购物 车 表 执 行 删除 SQL 
命令 ,将 所 选 商品 的 记录 从 购物 车 表 删 除 。 

@ 购物 车 页 面 的 已 选 商品 件数 和 商品 总 金额 计算 功能 ,可 以 使 用 JavaScript 的 
onchange 事件 处 理 函 数 响应 选中 /不 选中 的 鼠标 行为 ,对 选中 商品 进行 金额 计算 后 ,将 结 
果 动 态 显示 在 指定 区 域 。 
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开发 工具 HBuilder 


本 章 概 述 

通过 本 章 的 学 习 , 掌 握 开 发 工具 HBuilder 的 安装 和 使 用 方法 ,了 解 Web 项 目 和 移动 
App 项 目的 建立 和 运行 方法 。 

学 习 重 点 与 难点 

重点 : 

(1) HBuilder 的 安装 和 启动 。 

(2) 认识 HBuilder 界面 。 

(3) 新 建 项 目 、 运 行 项 目 。 

难点 : 

(1) 在 浏览 器 内 运行 Web 项目 。 

(2) 在 手机 上 运行 移动 App。 

重点 及 难点 学 习 指导 建议 : 

请 按照 本 章 的 内 容 进行 实践 操作 ,掌握 新 建 项 目 和 运行 项 目的 方法 ,自行 熟悉 开发 工 
具 HBuilder 的 界面 功能 ,并 努力 掌握 各 种 快捷 操作 。 


HTMLS+CSS3+JavaSeript 顺 旧 于 发 


1.1 飞速 编码 的 极 客 工 具 


前 端 开发 的 代码 编辑 工具 有 很 多 ,任何 能 够 进行 文档 编辑 的 工具 都 可 以 ,如 记事 本 和 
写字 板 ,当然 ,还 有 很 多 便捷 的 开发 工具 可 供 选 择 , 如 EditPlus、Sublime 和 Dreamweaver 
等 。 在 众多 的 开发 工具 中 ,推荐 使 用 HBuilder 作为 本 门 课程 的 开发 工具 。 

HBuilder 是 专注 于 HTML、JavaScript、CSS 的 IDE( 集 成 开发 环境 ) 。 它 能 大 幅 提高 
开发 效率 ,对 程序 员 也 设计 了 更 人 性 化 的 界面 , 它 包 括 最 全 面 的 语法 库 和 浏览 器 兼容 性 数 
据 。 从 FrontPage、Dreamweaver、UE, 到 Sublime Text 和 WebStorm, Web 编程 的 IDE 
已 经 更 换 了 几 批 。HBuilder 是 DCloud( 数 字 天 堂 ) 推 出 的 一 款 支持 HTML5 的 Web 开 
发 IDE。 

在 HBuilder 里 预 置 了 一 个 名 为 Hello HBuilder 的 Project( 项 目 ) ,该 项 目 中 包含 一 
个 快速 录入 的 参考 文件 和 练习 文件 ,用 户 输入 这 几 十 行 代码 后 会 发 现 , HBuilder 比 其 他 
开发 工具 至 少 快 5 倍 。 以 * 快 ?为 核心 的 HBuilder, 引 入 了 “快捷 键 语法 ”的 概念 ,巧妙 地 
攻克 了 困扰 很 多 开发 人 员 的 快捷 键 过 多 而 记 不 住 的 问题 。 开 发 人 员 仅 记 住 几 条 语法 ,就 
能 够 高 速 实现 跳 转 、 转 义 和 其 他 操作 。 例 如 ,Alt 十 [是 跳 转 到 括号 ,Alt 十 ?是 跳 转 到 引号 ， 
Alt 十 快捷 字母 是 执行 菜单 项 ,而 Alt 十 左 箭头 是 跳 转 到 上 一 次 光标 位 置 。Ctrl 则 是 各 种 
操作 ,如 Ctrl 十 d 是 删除 一 行 。Shift 则 是 转 义 ,如 Shift 十 回 车 是 二 br/ 二 ,Shift 十 空格 
是 & nbsp;。 

另外 ,HBuilder 的 生态 系统 可 能 是 最 丰富 的 Web IDE 生态 系统 ,由 于 它 同一 时 候 兼 
容 Eclipse 插件 和 Ruby Bundle。SVN git、ftp、PHP,less 等 各 种 技术 都 有 Eclipse 插件 。 

HBuilder 的 编写 用 到 了 Java、C、Web 和 Ruby。HBuilder 本 身 的 主体 由 Java 编写 ， 
它 基 于 Eclipse, 所 以 顺 其 自然 地 兼容 了 Eclipse 的 插件 。 但 由 于 Java 效率 太 低 ,所 以 用 C 
写 了 启动 器 。HBuilder 柔和 的 绿色 界面 设计 需要 动态 调节 屏幕 亮度 , 它 还 支持 手机 数据 
线 真 机 联 调 ,而 这 些 都 是 用 C 写 的 。HBuilder 非常 多 界面 ,如 用 户 信息 界面 都 是 使 用 
Web 技术 做 的 , 既 美丽 ,开发 起 来 又 快 。 最 后 ,代码 块 和 快捷 配置 命令 脚本 都 是 用 Ruby 
开发 的 。 





12 安装 HBuilder 


Windows 操作 系统 和 Mac 操作 系统 上 都 可 以 安装 HBuilder。 安 装 步骤 如 下 所 示 。 

(1) 直接 从 DCloud-HBuilder 官网 上 下 载 最 新 版 本 的 安装 文件 。DCloud-HBuilder 
官方 网 站 页 面 如 图 1. 1 所 示 。 

(2) 对 下 载 到 的 文件 夹 进行 解压 缩 ,HBuilder 不 用 安装 ,解压 完成 后 即 可 使 用 。 

(3) 打开 解压 后 的 文件 夹 , 找 到 一 个 叫 作 HBuilder. exe 的 可 执行 文件 ,这 个 可 执行 
文件 就 是 HBuilder 的 启动 文件 ,双击 该 文件 打开 HBuilder 编辑 器 。 
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图 1.1 DCloud-HBuilder 官方 网 站 


(4) 第 一 次 使 用 需要 登录 (可 选 ) ,建议 选 “登录 ”, 若 不 登录 , 则 每 次 都 会 提示 该 窗口 ， 
如 图 1.2 所 示 。 


围 Builder 玉 














1.2 注册 登录 窗口 


(5) 可 以 将 HBuilder. exe 这 个 执行 文件 发 送 到 桌面 快捷 方式 ,这 样 , 每 次 使 用 时 直 
接 在 桌面 就 可 以 打开 。 

(6) HBuilder 打开 之 后 ,会 出 现 一 些 很 人 性 化 的 设置 ,如 设置 视觉 颜色 。HBuilder 
的 编辑 器 风格 是 黄色 系 ,对 眼睛 比较 好 ,不 同 于 其 他 的 编辑 器 一 般 是 以 黑白 为 主 ,这 里 一 
般 使 用 标准 模式 ,如 图 1. 3 所 示 。 
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图 1.3 视觉 设置 


13 认识 界面 


如 图 1.4 所 示 , HBuilder 的 开发 界面 主要 由 菜单 栏 项 目 管理 器 ,编辑 窗口 .视图 模 
式 和 控制 台 5 部 分 构成 。 
菜单 栏 编辑 窗口 视图 模式 
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菜单 栏 : 位 于 窗口 的 左上 方 ,是 所 有 界面 功能 的 集合 和 导航 。 其 中 常用 的 选项 有 “ 文 
件 ” 和 “运行 ”, 请 自行 了 解 这 两 个 选项 内 的 功能 。 

项 目 管理 器 : 位 于 窗口 左 侧 ,是 管理 项 目的 工具 ,可 以 添加 、 删 除 \ 修 改 、 查 看 项 目 文 
件 。 项目 管理 器 被 关闭 后 , 按 下 F9 键 ,将 打开 项 目 管理 器 。 

编辑 窗口 : 在 项 目 管理 器 中 双击 某 个 文件 ,该 文件 将 在 编辑 窗口 中 打开 。 在 编辑 窗 
口中 可 以 同时 打开 并 编辑 多 个 文件 。 

视图 模式 : 在 窗口 右 侧 显 示 , 单 击 下 拉 列 表 将 出 现 “ 开 发 视图 ”“ 边 改 边 看 模式 ”“ 团 
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队 同 步 模式 ”和 “二 WebView 调试 模式 之 视图” 选项。 
控制 台 : 调试 代码 时 ,显示 代码 运行 状态 和 报告 信息 。 运 行 代码 时 ,控制 台 会 自动 弹 


出 。 当 控制 台 被 关闭 后 ,可 以 通过 菜单 栏 中 的 “视图 ”一 “显示 视 图 ”找到 “控制 台 ”, 手 动 打 
开 控 制 台 。 


14 新 建 项 目 


HBuilder 可 以 创建 两 种 项 目 , 即 Web 项 目 和 移动 App 项 目 。 
(1) 新 建 Web 项 目 。 在 菜单 栏 中 选择 “文件 ”>“ 新 建 ”>“Web 项 目 ”。 
在 出 现 的 “创建 Web 项 目 " 窗 口中 填写 项 目 名 称 ,设置 项 目 所 在 的 位 置 , 单 击 “ 完 成 ” 


按钮 即 可 ,之 后 新 创建 的 Web 项 目 会 在 左 侧 的 项 目 管理 器 中 出 现 。 这 里 创建 的 项 目 名 称 
为 Demo, 如 图 1.5 所 示 。 





















































创建 Web 项 目 -5° 
创建 Web 项 目 
请 输入 项 目 名 称 并 目 选择 一 个 模板 . 
项 目 信息 
项 目 名 称 ; | Demo 
位 置 : F\HBuilderProject 浏览 
选择 模板 
所 定义 要 本 
回 默认 项 目 默认 项 目 只 包含 index.htm[ 文 件 模板 
口 Hello HBuilder 该 项 目 可 以 让 你 快速 了 解 HBuilder , 试 一 下 吧 ! 示例 
口 微 信 项 目 微 信 WEB App ,使 用 此 模板 支持 微 信 )S-SDK 的 提示 模板 
语法 
Javascript 版 本 : |ECMAScript 5.1 v 
@ ET 

















图 1.5 创建 Web 项 目 


在 项 目 管 理 器 中 展开 项 目 Demo 的 文件 夹 ,会 看 到 里 面 有 首页 index. html\js 文件 
夹 .css 文件 夹 ,还 有 图 片 的 文件 夹 , 这 就 是 自动 生成 的 项 目 结构 ,如 图 1.6 所 示 。 





让 ML5+csSe+Javaseript 而 同 击发 


到 这 一 步 之 后 , 便 可 以 编写 我 们 的 代码 了 。 双 击 index. html 文件 ,在 第 8 行 写 人 
“<<hl 二 这 是 一 个 网 页 二 /hl 之 ”, 如 图 1.7 所 示 。 




















项 目 管理 十 叶 © OB ‘indexhtml 33 el] =] 
s 国 ”| 1 <!DOCTYPE html> 加 
< 园 Demo 29<html> 
css 3 <head> 
mimg 4 <meta charset="utf-8" /> 
[2 5 <title></title> 
»b (mh HelloHBuilder 号 人 
8 <h1> 这 是 一 个 网 页 </h1> 
9 
19 </body> 
11 </html> 
2 














1.7 编辑 代码 


按 下 Ctrl 十 S 组合 键 ,保存 index. html 文件 。 注 意 ,一 定 要 先 保存 ,后 运行 。 

(2) 新 建 移动 App 项 目 。 在 菜单 栏 中 选择 “文件 ”>“ 新 建 ”>“ 移 动 App”。 

在 出 现 的 “创建 移动 App” 中 填写 “应 用 名 称 ”, 设 置 项 目 所 在 的 位 置 , 单 击 “ 完 成 ” 按 
钮 即 可 ,之 后 新 建 的 移动 App 项 目 会 在 左 侧 的 项 目 管理 器 中 出 现 。 这 里 创建 的 项 目 名 称 
为 Demo2 ,如 图 1. 8 所 示 。 注 意 ,新 建 移动 App 需要 联网 分 配 一 个 appid, 在 真 机 联 调 、 打 
包 发 行 时 都 需要 这 个 ID, 所 以 如 果 不 联网 ,就 无 法 创建 移动 App。 









































厨 创建 移动 App - ° ED 
人 移动 App 
| 。 请 给 入 应 用 名 称 并 且 迁 择 一 个 模板 . 
| “应 用 信息 
| 应 用 名 称 |Demoz2 
| 位 置 ; [FAHBuilderProject 浏 中 
0 
| 回 S 和 本 全 模板 只 包 会 indexhtm 一 个 文件 和 相关 目录 . 模板 
口 muimhB 已 包 会 mui 的 js、css、 闻 体 资源 的 项 目 模板 模板 
| 。 口 _ mui 登 录 模 板 。。 锅 登录 和 设置 的 MU 模板 项 目 模板 
| 口 Hello H5+ HTML5plus 规 范 的 演示 ,包括 提 像 头等 各 种 底层 能 力 的 调用 示例 
由 口 Hello mui mui 前 访 框 沫 各 种 UI 控件 ( 如 按 租 ) 的 展示 示例 
| 
| 法 
Javascript 版 本 : | ECMAScript51 v 
| 
HTML5+ 是 底层 runtime , mui 是 前 篇 框架 ,他们 的 关系 类 似 phonegap 利 qmobile. 
| 点 二 查看 ， 黎 动 APp 开 发 入 门 教程 
| 更 天 要 示人 上 二 这 里， htpsy/github comydcdoudiolcasecode 
| 
| 四 本 E33 
| 
图 1.8 “创建 移动 App” 项 目 
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在 项 目 管理 器 中 展开 项 目 Demo2 的 文件 夹 ,会 看 到 里 面 有 首页 index. html、 有 js 文 
件 夹 .CSS 文件 夹 ,还 有 图 片 的 文件 夹 和 应 用 配置 文件 manifest. json ,这 就 是 自动 生成 的 
项 目 结构 ,如 图 1.9 所 示 。 


”加 Demo 
“< 加 Demo> 
css 
区 img 
大 je 


部 unpackage 

加 indexhtml 

国 manifestjson 
» @ HelloHBuilder 








图 1.9 项 目 结构 


然后 就 可 以 编写 代码 了 。 双 击 index. html 文件 ,在 第 17 行 写 人 “一 hl 之 这 是 一 个 移 
动 App 一 /hl 之”, 如 图 1. 10 所 示 。 
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加 [a 1 <!DOCTYPE html> 局 
sb 国 Demo 2s<html> 
“加 Demoz 3=<head> 
夯 css 4 <meta charset="utf-8"> 
simg 5 <meta name="viewport” content="initial-scale=1.0, maximum-scale=1.0, user 
加 六 6 <title></title> 
ee 六 <script type="text/javascript"> 
国 manifestjson 8 
图 HelloHBuilder Es document.addEventListener('plusready', function(){ 
10 //console.1og(" 所 有 plus api 都 应 该 在 此 事件 发生 后 调用 , 否则 会 出 现 plus is undg| 
11 
12 D; 
13 
14 </script> 
15 </head> 
16E<body> 
17 | <h1> 这 是 一 个 移动 App/h1> 
18 </body> 
19 </html> 
v 
< > 





























图 1.10 编辑 代码 


按 下 Ctrl 十 S 组 合 键 ,保存 index. html 文件 。 注 意 ,一 定 要 先 保存 ,后 运行 。 
15 Web 项 目的 运行 


Web 项 目的 运行 有 两 种 方式 ,以 图 1. 11 为 例 ,首先 ,在 项 目 管理 器 中 选中 Demo 项 
目的 index. html 文件 ,然后 在 菜单 栏 中 选择 “运行 ”, 单 击 对 应 的 浏览 器 后 跳 转 到 一 个 对 
应 的 页 面 ,如 图 1. 12 所 示 。 注 意 , 选 择 的 浏览 器 必须 是 事先 在 计算 机 上 安装 过 的 浏览 器 。 

另外 一 种 方式 是 在 工具 栏 中 选择 “在 浏览 器 内 运行 ”按钮 ,如 图 1. 13 所 示 。 运 行 的 结 


果 同 上 。 
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图 1.11 运行 代码 
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1.12 运行 结果 
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图 1.13 在 浏览 器 内 运行 


16 移动 App 的 运行 


移动 App 运行 的 方式 有 两 种 : 一 种 是 在 计算 机 浏览 器 上 运行 ; 另 一 种 是 在 手机 上 


运行 。 
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(1) 在 计算 机 浏览 器 上 运行 。 移 动 App 项 目 可 以 在 计算 机 浏览 器 上 运行 ,在 工具 栏 
中 单 击 “ 浏 览 器 内 运行 "按钮, 单 击 对 应 的 浏览 器 之 后 跳 转 到 一 个 对 应 的 页 面 。 

在 浏览 器 页 面 按 下 F12 键 ,进入 “开发 者 模式 ”。 页 面 会 以 手机 屏幕 大 小 显示 ,以 此 
模拟 手机 上 的 显示 效果 ,如 图 1. 14 所 示 。 
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图 1.14 运行 代码 


(2) 在 手机 上 运行 。 因 为 计算 机 浏览 器 不 具有 手机 的 API 功能 ,所 以 如 果 程 序 中 需 
要 调用 API, 还 是 需要 使 用 真 机 调试 。 真 机 调试 的 步骤 如 下 。 

首先 ,手机 用 数据 线 与 计算 机 相连 。iOS 手机 应 事先 在 计算 机 上 安装 iTools， 
Android 手机 应 在 计算 机 上 安装 对 应 型 号 的 驱动 程序 或 者 手机 助手 ,以 保证 手机 与 计算 
机 连接 成 功 。 

在 HBuilder 识别 到 手机 以 后 ,在 菜单 栏 中 选择 “运行 ”一 “ 真 机 运行 ”, 弹 出 被 识别 的 
手机 设备 ,如 图 1. 15 所 示 。 
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NG 浏览 寄 运 行 (B) 避 。- a 隆夫 (双击 Ctr) 
硬 mdexhtmi a[| 目 HBuilder 天 序 运 行 -[ 设 备 ; 划 革 9 iPhone] - [Demo2] Ctrl#R 

1 <1DOCTYPE ”打开 WebView 调 试 樟 式 (D) 目 自 定义 基 座 运行 [设备 : 刘 芝 的 iphone] - [Demo2] 

25<htmly> 外 部 R00 设置 自 定义 调 汪 芯 座 

3=<head> 运行 本 二 (N)。 | 回 真 机 运行 常见 故障 排除 指南 


二 如 何 使 用 Chrome 控 制 台词 试 Android 应 用 
回 如 何 使 有 Safari 控制 台 调试 IOS 应 用 


5 <meta name="viewport" content="i 
6 <title></title> 

<script type="text/javascript"> 
8 

9 













document .addEventListener( 'plusready’, function(){ 


图 1.15 真 机 运行 
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选择 “HBuilder 基 座 运行 -设备 "后 ,控制 台 显示 信息 如 图 1. 16 所 示 。 











轩 控 制 台 > 
当前 是 [Demo2 运行 于 刘 萤 的 iPhone] 的 控制 台 ， 点 右上 角 工 具 条 相应 按钮 可 切换 控制 台 
正在 建立 手机 连接 . . - 

正在 安装 手机 端 HBuilder 调 试 基 座 . . . 




















图 1.16 控制 台 显示 信息 
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图 1.17 执行 应 用 程序 
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HTML 基础 


本 章 概 述 
通过 本 章 的 学 习 , 学 生 能 够 了 解 HTML 语法 ,学习 使 用 编辑 工具 编写 HTML 文档 。 
通过 HTML 文档 的 创建 过 程 ,获得 编辑 和 修改 HTML 网 页 的 经 验 ; 了 解 浏 览 器 如 何 对 
网 页 进行 展示 ,理解 HTML 文档 与 浏览 器 的 关系 ,记忆 HTML 文档 的 基本 结构 。 
学 习 重 点 与 难点 
重点 : 
(1) HTML 文档 的 结构 。 
(2) HTML 的 语法 。 
(3) HTML 中 常用 的 标签 。 
表单 控件 的 使 用 。 
重点 及 难点 学 习 指导 建议 : 
。 重点 掌握 HTML 的 文档 结构 ,在 对 标签 的 认识 基础 上 ,会 使 用 标签 添加 文字 、 图 
片 超 链 接 等 内 容 , 着 重 记忆 常用 标签 的 语法 和 属性 含义 。 
。 基于 表格 和 div、span 等 形成 文档 基本 结构 ,进行 版 块 划分 。 
。 强化 练习 表单 及 表单 元 素 的 使 用 ,可 进行 各 种 表单 页 面 的 大 量 编码 练习 ,以 达到 
熟练 使 用 的 程度 。 
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21 认识 HIML 


当 畅 游 Internet 时 ,通过 浏览 器 看 到 的 网 站 是 由 超 文 本 标记 语言 (Hypertext Markup 
Language, HTML) 构 成 的 。HTML 的 作用 是 告诉 浏览 器 如 何 显示 文档 的 内 容 , 如 文本 、 
图 像 和 其 他 媒体 ,还 可 以 通过 超 链 接 把 文档 与 其 他 互联 网 资源 连接 起 来 。 

HTML 网 页 文件 可 以 使 用 记事 本 、 写 字 板 或 者 EditPlus 等 编辑 工具 编写 ,以 . htm 
或 . html 为 文件 后 级 名 保存 。 将 HTML 网 页 文件 用 浏览 器 打开 显示 , 若 测 试 没 有 问题 ， 
则 可 以 放 到 网 站 服务 器 上 , 供 各 类 客户 端 访 问 。 


2.1.1 HTML 基本 语法 


一 个 HTML 文档 由 一 系列 元 素 组 成 。HTML 元 素 指 的 是 从 开始 标签 (start tag) 到 
结束 标签 (end tag) 的 所 有 代码 ,如 表 2. 1 所 示 的 元 素 。 











表 2.1 元 素 的 组 成 
开始 标签 元 素 内 容 结束 标签 
<p> This is a paragraph </p> 
<a href="default. htm" > This is a link </a> 
<br/> 








大 多 数 HTML 元 素 都 可 以 嵌 套 。HTML 文档 由 凡 套 的 HTML 元 素 构成 。 

HTML 标签 (或 标记 ) 是 由 “二 ”和 “二 ” 括 住 的 指令 标签 ,用 于 向 浏览 器 发 送 指令 。 

HTML 标签 分 单 标签 和 成 对 标签 两 种 。 成 对 标签 是 由 开始 标签 二 标签 名 二 和 结尾 
标签 二 /标签 名 二 组 成 的 ,如 二 html 二 三 /html 记 ,其 作用 域 只 是 这 对 标签 中 间 的 文档 。 成 
对 标签 必须 有 开头 和 结尾 部 分 ,但 浏览 器 具有 一 定 的 容错 性 ,即使 没有 配对 ,通常 也 不 会 


报错 。 
书写 HTML 页 面 时 ,标签 是 不 区 分 大 小 写 的 ,所 以 实际 网 页 中 大 写 和 小 写 的 标签 都 
存在 。 


为 了 便于 理解 ,将 HTML 标签 语言 大 致 分 为 基本 标签 .格式 标签 ,文本 标签 ,图 像 标 
签 、 表 格 标签 .链接 标签 .表单 标签 和 帧 标签 等 。 

属性 是 标签 里 的 参数 项 。 大 多 数 标签 都 有 自己 的 一 些 属性 ,属性 要 写 在 开始 标签 内 。 
属性 用 于 进一步 改变 显示 的 效果 ,各 属性 之 间 无 先后 次 序 , 属 性 是 可 选 的 ,也 可 以 省 略 而 
采用 默认 值 。 其 格式 如 下 。 


< 标签 名 属性 =" 值 " 属性 2- " 值 " 属性 3- " 值 "…> 内 容 < /标签 名 > 


属性 值 可 以 不 加 双 引 号 ,但 是 为 了 适应 XHTML 规则 ,提倡 对 属性 值 全 部 加 双 引 
号 ,如 : 





<a href="1.html" target—" blank">Chapter 1</a> 


第 2) 人 瘟 HTIML 基础 


2.1.2 HTML 文档 的 基本 结构 


如 图 2. 1 所 示 , HTML 文档 的 主要 结构 可 划分 为 3 个 部 分 : 网 页 区 二 html 之 … 
二 /html> 、 标 头 区 二 head 之 …< 到 /head 之 和 内 容 区 
<body>…<=/body>。 


1. <html>:…</himl> 


一 html 二 标签 用 于 HTML 文档 的 最 前 边 , 用 来 
标识 HTML 文档 的 开始 。 二 /html 二 标签 恰恰 相反 ， 
它 放 在 HTML 文档 的 最 后 边 , 用 来 标识 HTML 文档 2.1 HTML 文档 的 基本 结构 
的 结束 。 两 个 标签 必须 一 块 使 用 。 





2. <head>…</head> 


去 head 之 和 均 /head 二 构成 HTML 文档 的 开头 部 分 ,在 此 标签 对 之 间 可 以 使 用 
二 title 二 过 /title 记 ,二 script 记 过/script 记 等 标签 对 。 这 些 标签 对 都 是 用 来 描述 HTML 
文档 相关 信息 的 。 二 head 记 和 二 /head 二 标签 对 之 间 的 内 容 是 不 会 在 浏览 器 的 框 内 显示 
出 来 的 ,两 个 标签 必须 一 块 使 用 。 


3. <body> …</body> 


所 body 之 和 过/body 二 是 HTML 文档 的 主体 部 分 ,在 此 标签 对 之 间 可 包含 一 p 之 … 
去 /p>. 二 hl>…<</hl>、 二 br>、 hr> 等 众多 的 标签 。 它 们 定义 的 文本 .图 像 等 将 会 
在 浏览 器 的 框 内 显示 出 来 。 


4. <title> …<hitle> 


使 用 过 浏览 器 的 人 可 能 都 会 注意 到 浏览 器 窗口 最 上 边 蓝 色 部 分 显示 的 文本 信息 , 那 
些 信息 一 般 是 网 页 的 主题 。 要 将 网 页 的 主题 显示 到 浏览 器 的 顶部 其 实 很 简单 ,只 要 在 
三 title 二 过 /title 志 标签 对 之 间 加 入 需要 显示 的 文本 即 可 。 

下 面 是 一 个 简单 的 网 页 实例 。 通 过 该 实例 ,可 以 了 解 以 上 各 个 标签 对 在 一 个 HTML 
文档 中 的 布局 或 所 使 用 的 位 置 。 


<html> 
<head> 
<title> 显 示 在 浏览 器 窗口 最 顶端 的 文本 < /title> 
</head> 
<body> 
<p> 正 文 文本 < /p> 
< /body> 
</htm> 


注意 ,一 title 二 二 /title 二 标签 对 只 能 放 在 一 head 之 一 /head 盖 标签 对 之 间 。 
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2.1.3 项 目 : 第 一 个 HTML 页 面 
1. 项目 说 明 


编写 第 一 个 HTML 页 面 ,在 页 面 中 显示 “我 们 开始 学 习 HTML”, 并 且 在 浏览 器 中 查 
看 和 展示 页 面 。 


2. 项 目 设计 


本 项 目 主要 完成 编写 、 保 存 、 修 改 HTML 文档 ,以 及 查看 HTML 文档 的 过 程 和 步 
又 。 需 要 准备 的 工具 是 浏览 器 和 文本 编辑 工具 。 

浏览 器 有 很 多 可 供 选择 ,最 普及 的 浏览 器 当 属 微软 (Microsoft) 公司 的 Internet 
Explorer( 俗 称 IE) ,其 他 的 一 些 浏览 器 包括 Opera、Google Chrome、Mozilla Firefox( 俗 称 
“火狐 ”) 等 。 这些 浏览 器 的 基本 功能 都 是 浏览 网 页 ,因此 具体 使 用 哪个 浏览 器 是 无 所 
谓 的 。 

至 于 文本 编辑 工具 ,如 果 使 用 的 是 Windows 操作 系统 ,可 以 使 用 它 自 带 的 记事 本 
(Notepad) 程 序 。 作 为 人 门 学 习 , 此 处 先 介绍 一 下 记事 本 的 使 用 方法 ,后 面 的 章节 会 使 用 
功能 强大 的 HBuilder 作为 编辑 工具 。 


3. 项 目 实施 


(1) 编写 网 页 。 
打开 Windows 自 带 的 文本 编辑 器 “记事 本 ”, 输 入 如 下 代码 。 


<html> 
<head> 
<meta charset= "utf- 8"> 
<title> 第 一 个 网 页 < /title> 
</head> 
<body> 
我 们 开始 学 习 HTML 
< /body> 
</htm> 
(2) 保存 网 页 。 
在 记事 本 中 单 击 左 上 角 的 “文件 ”>“ 另 存 为 ”, 保 存 时 注意 修改 文件 的 扩展 名 为 . htm 
或 . html, 保 存 类 型 选择 “所 有 文件 ”,Encoding 选择 UTF-8。 
(3) 运行 网 页 。 
双击 “第 一 个 网 页 . html" 文 件 ,会 自动 弹出 一 个 浏览 器 窗口 ,显示 这 个 网 页 的 内 容 , 如 
图 2.2 所 示 。 所 有 的 HTML 标签 浏览 器 都 不 会 显示 出 来 ,浏览 器 中 显示 的 是 标签 中 间 
的 文字 ,文字 按照 HTML 标签 规定 的 样式 显示 ,这 就 是 “标记 语言 ”的 基本 特点 。 
(4) 修改 网 页 。 
在 刚才 的 文件 “第 一 个 网 页 . html”* 上 右 击 ,从 弹出 的 菜单 中 选择 “打开 方式 ”>“ 记 事 
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文 作 (中 编 名 (二 看 (V) 收 训 夫 (A) 工具 (D 帮助 (H) 
我 们 开始 学 习 HTML 








图 2.2 第 一 个 网 页 


本 ”, 就 可 以 在 记事 本 中 打开 并 编辑 文件 了 。 

(5) 中 文 乱码 问题 。 

二 meta charset 一 "utf-8" 之 是 告诉 浏览 器 以 UTF-8 字符 集 显示 文字 ,保存 的 时 候 也 
需要 把 文件 保存 为 UTF-8 格式 ,否则 如 果 文 档 中 声明 的 字符 集 与 保存 的 不 一 致 ,就 会 产 


4. 知识 运用 


使 用 EditPlus、Sublime 或 HBuilder 等 工具 创建 并 编写 一 个 网 页 文件 ,显示 “Hello 
World”。 


22 HTML 常用 标签 
2.2.1 文本 与 标签 


1. 文 本 


在 浏览 器 中 显示 给 读者 的 部 分 不 是 标签 ,也 不 是 注释 ,就 一 定 是 文本 了 。 

浏览 器 总 是 会 截 短 HTML 页 面 中 的 空格 。 如 果 在 文本 中 写 10 个 连续 的 空格 ,显示 
该 页 面前 ,浏览 器 就 会 删除 它们 中 的 9 个 ,换行 、 缩 进 只 保留 一 个 空格 。 例 如 ,下 面 这 段 
代码 : 


文件 。 

</p> 

其 显示 结果 如 图 2. 3 所 示 。 

在 HTML 中 不 能 使 用 小 于 号 (二 ) 和 大 于 号 (二 ), 这 是 因 
为 浏览 器 会 误 认 为 它们 是 标签 。 

在 HTML 中 , 某 些 字符 是 预 留 的 。 如 果 和 希望 正确 地 显示 预 留 字符 ,必须 在 HTML 
源 代码 中 使 用 字符 实体 。 如 需 显示 小 于 号 ,必须 写成 “&lt; ?或 “中井 60;”。 如 需 在 页 面 
中 显示 空格 , 则 使 用 “&nbsp;”。 部 分 字符 实体 的 定义 见 表 2. 2。 


这 是 一 个 HTML 的 文件 。 





图 2.3 空格 的 显示 效果 
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表 2.2 部 分 字符 实体 的 定义 





























显示 结果 描述 实体 名 称 实体 编号 
空格 &nbsp; & #160; 
-9 小 于 号 &lt; 中 #60; 
FE 大 于 号 Bgt; #62; 
& 和 号 & amp; & #38; 
引号 &.quot; B34 
撤 号 &apos; (IE 不 支持 ) 取 #39; 
2. 常用 标签 
(1) 注释 二 !- - ->。 


二 ! 一 注释 语句 -二 是 HTML 文件 中 的 注释 标签 ,注释 语句 中 的 内 容 会 被 浏览 器 忽 
略 , 不 显示 在 网 页 上 ,所 以 设计 者 可 以 在 里 面 放置 任何 内 容 。 

(2) 换行 二 br/ 记 。 

br 是 单 标签 ,作用 是 换行 。 

去 br/> 此 处 另 起 一 行 。 

(3) 标题 hl 之 一 /hl>。 

h 标签 用 于 显示 标题 ,独自 成 行 , 带 有 默认 的 字号 和 段 间距 ,例如 : 


<hl> 标 题 1< /hl><h2> 标 题 2< /h2><h3> 标 题 3< /h3><h4> 标 题 4< /h4><h5> 标 题 5< /h5><h6> 标 


题 6< /h6> 
标题 的 显示 效果 如 图 2.4 所 示 。 一 一 一 一 
(4) 段落 p</p>>。 标题 1 
p 标签 的 作用 是 分 段 (paragraph) ,每 个 段落 会 男 起 一 行 , 带 标题 2 
有 默认 的 段 间 距 。 标题 3 
例如 : 
标题 4 
<p> 这 是 一 个 段落 < /p> 
标题 5 
(5) 块 <div 之 </div>。 











div 标签 的 作用 是 分 块 (block) ,每 个 块 会 另 起 一 行 .一 对 
div 标签 中 间 可 以 放置 文本 、 图 片 或 其 他 元 素 ,div 通常 作为 样式 图 2.4 标题 的 显示 效果 
的 容器 。 

例如 : 

<div> 这 是 一 个 块 </div> 
或 者 : 


<div><p> 这 是 我 的 内 容 < /p>< /div> 


锚 思 咎 ”HT 和 可 


(6) 区 间 二 span 之 和 /span 二 。 

span 标签 的 作用 是 划分 区 间 ,通常 作为 样式 的 容器 ,默认 不 会 独立 成 行 , 多 个 区 间 会 
在 一 行 上 连续 显示 。 

例如 : 


<span> 这 是 一 个 区 间 < /span> 


(7) 列表 。 

列表 分 为 无 序 (unordered) 列 表 、 有 序 (ordered) 列 表 和 定义 列表 。 

ul 代表 无 序列 表 (unordered list) , 它 的 作用 是 为 每 个 列表 项 显示 一 个 粗 点 。 

ol 代表 有 序列 表 (ordered list) , 它 的 作用 是 显示 每 个 列表 项 的 序号 。 

用 二 ul 二 二 /ul 过 或 二 ol 二 二 /ol 二 定义 边界 ,列表 中 的 项 目 用 过 li 二 二 /li 二 进行 标记 。 
列表 可 以 嵌 套 。 例 如 : 


<ul> 
<1i> 这 是 一 个 无 序列 表 < /1i> 
<1i> 下 面 是 内 部 的 一 个 有 序列 表 < /1i> 
<ol> 
<1i> 列 表 项 A< /1i> 
<1i> 列 表 项 B< /1i> 
<1i> 列 表 项 c< /1i> 
</ol> 
<1i> 列 表 结 束 < /1i> 


</ul> 


列表 的 显示 效果 如 图 2. 5 所 示 。 
y A : a 。 这 是 一 个 无 序列 表 
dl 代表 定义 列表 (definition list)。 在 二 dl 二 三 /dl 二 标 | 。 下面 是 内 部 的 一 个 有 序列 表 
签 里 可 以 用 二 dt> (definition term) 表 示 项 目 , 用 二 dd 二 nt 
(definition description) 表 示 描 述 。 
例如 : 


<dl> 
< dt> HIML< /dt> 
<dd> HyperText Markup Language 的 缩写 < /dd> 
<dt>WNW< /dt> 
<dd>World Wide Web 的 缩写 < /dd> 
</dl> 


显示 效果 为 





图 2.5 列表 的 显示 效果 


HTML 

HyperText Markup Language 的 缩写 
WW 

World Wide Web 的 缩写 
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(8) 图 片 一 img 之 一 /img> 。 

在 网 上 看 到 或 听 到 的 图 像 、 视 频 、Flash 等 多 媒体 元 素 并 不 是 HTML 文档 的 一 部 分 ， 
这 些 多 媒体 数据 与 HTML 文档 分 开 保 存 ,通过 特殊 的 标签 把 这 些 多 媒体 元 素 的 引用 包 
括 在 文档 中 ,浏览 器 利用 引用 加 载 这 些 元 素 , 并 把 它们 与 文本 集成 在 一 起 。 

到 img 之 允许 将 外 部 图 像 文件 (JPEG .GIF、PNG 等 格式 ) 嵌 入 文档 。 

到 img 过 标签 的 常用 属性 包括 : src 用 于 指定 图 像 文件 的 路 径 和 名 称 ,一般 都 用 相对 
路 径 , 此 属性 是 必须 写 的 ;width 用 于 指定 所 插入 的 图 像 的 宽度 ;height 用 于 指定 所 插入 
的 图 像 的 高 度 ;align 用 于 指定 文本 字段 中 嵌入 图 像 水 平 对 齐 ;alt 用 于 指定 不 显示 图 像 时 
的 替代 文本 ;border 用 于 指定 图 像 外 边框 大 小 。 

如 下 面 这 段 代码 显示 效果 如 图 2.6 所 示 。 








< img src= "pic.png" width= "400px" height= "300px" border= "0" alt= "范例 图 片 "> 


(9) 超 链接 二 a 二 二 /a 这 。 

超 链接 用 二 a 二 二 /a 二 标签 创建 。 一 对 二 a 
二 /a 二 标签 中 间 可 以 是 图 片 .文字 或 页 面 元 素 , 单 击 
超 链接 ,就 可 以 自动 连 到 相应 的 文件 。 

二 a 二 标签 的 常用 属性 包括 : href 属性 用 于 指定 
链接 目的 地 ,其 值 可 以 是 任何 有 效 的 URL, 包 括 相 对 
的 URL 和 绝对 的 URL, 也 可 以 是 JavaScript 语句 ; 
target 属性 用 于 规定 打开 超 链接 文档 的 位 置 ,相关 属 
性 值 见 表 2. 3;title 属性 用 于 指定 超 链接 的 说 明文 字 , 当 鼠标 在 超 链 接 上 方 悬 停 时 ,会 出 
现 对 超 链 接 进行 说 明 的 方 框 。 





图 2.6 img 元素 的 显示 效果 


表 2.3 target 的 属性 值 




















值 描 述 
_blank 在 新 窗口 中 打开 被 链接 的 文档 
_self 默认 。 在 相同 的 框架 中 打开 被 链接 的 文档 
_parent 在 父 框架 集中 打开 被 链接 的 文档 
_top 在 整个 窗口 中 打开 被 链接 的 文档 
framename 在 指定 的 框架 中 打开 被 链接 的 文档 


例如 : 


<a href= "http://www.nou.com.cn" target=" blank"> 东 软 教育 在 线 </a>< !- -在 新 窗口 打开 东 
软 教育 在 线 --> 

<a href- "ftp://172.23.7.45/data.zip" title= "数据 文件 "> 下 载 </a><!- -下 载 数据 文件 压缩 
包 --> 

<a href= "course list.action"> 课 程 列表 < /a>< !- -执行 服务 端 代 码 --> 

<a href= "javascript:history.go(-1)" target="” self"> 返 回 </a><!-- 返 回 上 一 页 面 --> 

<a href="# "> 首页 </a>< !-- 空 链接 不 跳 转 --> 
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2.2.2 项 目 : 介绍 我 的 学 校 1 
1. 项 目 说 明 


设计 并 制作 网 页 “介绍 我 的 学 校 ”, 页 面 内 容 包 括 学 校 的 图 片 . 学 校 简介 和 大 学 精神 的 
相关 文字 介绍 ,并 有 页 内 导航 , 单 击 导航 文字 即 可 跳 转 到 “学 校 简 介 ” 和 “大 学 精神 ”的 段落 
标题 。“ 介 绍 我 的 学 校 ” 网 页 效果 如 图 2.7 所 示 。 
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学 校 全 落 于 美丽 的 海滨 域 市 大 连 ， 地 处 大 连 软件 园 核心 区 域 ， 占 地 面积 60 3 万 平方 米 ， 总 建筑 面积 39 平方 灯 ， 现 有 在 校生 14000 余 人 ， 、 
学 校 现 设 有 15 个 教学 机 构 ， 学 科 专 业 涵 半 工学 、 管 理学、 艺术 学 、 文 学 4 个 学 料 门类 ， Pe 面向 29 个 告 市 招生 ， 同时 还 
妥 100% > 











图 2.7 “介绍 我 的 学 校 ”网 页 效果 


2. 项 目 设 计 


本 项 目的 页 面 上 依次 出 现 了 标题 .图 片 . 超 链接 和 有 段落 ,使 用 二 h 二 标签 定义 标题 ,使 
用 二 p 二 标签 定义 段落 ,使 用 二 img 一 标签 插入 图 片 , 使 用 二 a 二 标签 添加 超 链 接 , 使 用 二 ul 二 
标签 定义 导航 列表 。 


3. 项 目 实施 
本 项 目 代码 如 下 。 


<htm> 
<head> 
<title> 介 绍 我 的 学 校 < /title> 
<meta charset= "utf- 8"> 
</head> 
<body> 
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<hl> 介 绍 我 的 学 校 < /hl> 
<Ul> 

<1li><ahref= "# intro"> 学 校 简介 </a></1li> 

<li><a href= 哇 spirit"> 大 学 精神 </a></1i> 

<1li><ahref=-" 虽 campus"> 校 园 风 光 </a></1i> 
</ul> 
<h2 ig= "intro"> 学 校 简介 < /h2> 
< img src="1395150360585. jpg" width="900" height="300" border="0" alt="" align=" 
center"> 
< 户 学 校 座 落 于 美丽 的 海滨 城市 大 连 , 地 处 大 连 软 件 园 核心 区 域 , 占 地 面积 60.3 万 平方 米 , 总 
建筑 面积 39.9 万 平方 米 , 现 有 在 校生 14000 余 人 。 学 校 现 设 有 15 个 教学 机 构 ,学 科 专 业 涵盖 
工学 ,管理 学 .艺术 学 ,文学 4 个 学 科 门 类 , 共 设 置 了 28 个 本 科 专 业 ,面向 29 个 省 市 招生 ,同时 
还 有 13 个 高 职 专科 专业 面向 15 个 省 市 招生 。< /p> 
<h2 id= "spirit"> 大 学 精神 < /h2> 
<p> 我 们 的 校训 是 : 精 勤 博学 ,学 以 致 用 。" 精 勤 博学 "强调 的 是 为 学 为 人 的 态度 和 原则 ,并 诠释 
了 "学 "的 程度 ,方式 方法 和 范畴 。" 学 以 致 用 " 旨 在 倡导 将 学 与 用 紧密 联系 起 来 ,学 用 结合 ,知行 
合 一 ,将 知识 运用 于 实际 应 用 ,并 在 应 用 中 敢 为 人 先 ,勇于 创新 ,使 所 学 能 够 真正 为 社会 创造 
价值 ,从 而 实现 个 人 价值 和 社会 价值 的 统一 ,达成 "教育 创造 学 生 价值 ,学 生 创造 社会 价值 "的 
目标 ,彰显 教育 的 价值 和 使 命 。< /p> 
<h2 id= "campus"> 校 园 风光 < /h2> 
<img src="1492592299970.jpg" width="900" height="300" border="0" alt="" align=" 
center"> 

< /body> 
</html> 


4. 知识 运用 
完成 如 图 2. 8 所 示 网 页 的 制作 , 当 单 击 “ 百 度 ” 图 片 后 ,在 新 窗口 中 打开 百度 网 页 。 


北京 ， 你 好 ! 








世界 ， 你 好 ! 
hello world! 





86 
Bai 人 百度 


图 2.8 网 页 制作 
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表格 是 HTML 的 一 项 非常 重要 的 功能 ,利用 其 多 种 属性 能 够 设计 出 多 样 化 的 表格 。 
使 用 表格 可 以 使 页 面 更 加 整齐 美观 。 


鳃 回转 Hi 生 十 


2.3.1 表格 标签 


二 table 二 是 表格 标签 ,通常 使 用 一 对 二 table 记 二 /table 放 标签 划分 表格 的 边界 。 
table 相关 的 属性 有 以 下 4 个 。 
align: 对 齐 方式 , 取 值 可 以 为 left、center、right。 例 如 : 


<table align= "center"></table> 
bgcolor: 背景 颜色 , 取 值 可 以 为 十 六 进 制 ,rgb 颜色 或 颜色 名 称 。 例 如 : 
<table border= "1" bgcolor= "# 00FF00"> 


在 HTML4.01 中 ,table 元 素 的 align 和 bgcolor 属性 是 不 推荐 使 用 的 ,建议 使 用 
CSS 定义 样式 。 例 如 : 


<table style= "align:center;background- color:red"> 


border: 边框 ,border 二 "0" 代 表 不 显示 边框 线 ,border 二 "1" 代 表 显 示 宽 度 为 1 像素 
的 边框 线 。 

width: 宽度 ,可 以 用 % 或 px 为 单位 。 

到 tr 之 是 行 标签 ,一 对 二 tr 之 一/tr 之 标签 界定 表格 中 的 一 行 。 

一 td 之 是 单元 格 标签 ,一 对 二 td 之 二 /td 标签 界定 一 个 单元 格 。 

去 th> 是 表 头 标签 ,一 对 二 th> 志 /th> 用 来 替代 二 td 之 二 /td> 作 为 表 头 的 单元 格 ， 
表 头 的 文本 默认 加 粗 并 居中 对 齐 。 

二 td> 或 二 th> 使 用 属性 colspan 表示 跨 列 ,rowspan 表示 跨行 。 例 如 : 所 td colspan 一 
"2" 二 二 /td 二 表示 单元 格 跨 2 列 。 

示例 代码 如 下 。 


<table border= "1"> 
<tr> 
<th> 姓 名 < /th> 
<th> 邮 件 < /th> 
</tr> 
<tr> 
<td> 张 明 < /td> 
<td> zhangming@ neusoft .edu.cn< /td> 
</tr> 
<tr> 
<td> 王 芳 < /td> 
<td> wangfang@ neusoft.edu.cn< /td> 
</tr> 
<tr> 
<td colspan= "2" align= "center"> 
共 2 人 
</td> 
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</tr> 
</table> 


该 表格 的 显示 效果 如 图 2.9 所 示 。 
隆 名 | 电 御 | 


胀 明 zhangming@neusoft.edu.cn 
压 芳 lwangfang@neusoft.edu.cn 
共 2 人 




















图 2.9 表格 的 显示 效果 


2.3.2 项 目 : 图 书 统计 表 





















































1. 项 目 说 明 
制作 一 个 表格 用 于 统计 图 书 分 类 , 书 名 和 册 数 ,如 图 2. 10 所 示 。 
2. 项 目 设计 分 类 书 名 地 数 
《 汝 据 床 原理》 1 
本 项 目 实现 一 个 表格 结构 ,共有 6 行 ,将 使 用 ”做 据 库 |&Oracle 数 据 库 管 理 与 开发 > | 
< 到 table> 元 素 定 义 表格 。 另 外 ,使 用 过 tr 一 定义 《0raclel08 基 础 教程 > |2 
ava | 《Java 得 序 设计 儿 
行 ,使 用 一 td 定义 单元 格 ,使 用 一 由 > 定义 表 头 国 ee 


























单元 格 ,对 于 跨行 的 单元 格 ,使 用 rowspan 属性 ,对 

于 跨 列 的 单元 格 , 使 用 colspan 属性 。 本 项 目 表格 

的 第 1 行 单 元 格 需 要 使 用 二 th> 定 义 成 表 头 。 第 2 行 有 3 个 单元 格 , 其 中 第 1 个 单元 格 
跨 3 行 ,使 用 rowspan 属性 。 第 3 行 有 2 个 单元 格 ,第 4 行 有 2 个 单元 格 。 第 5 行 有 3 个 
单元 格 ,第 6 行 有 2 个 单元 格 , 其 中 第 1 个 单元 格 跨 2 列 ,使 用 colspan 属性 。 


3. 项 目 实施 
本 项 目 代码 如 下 。 


<table border= "1"> 
< tr> 
<th> 分 类 < /th> 
<th> 书 名 < /th> 
<th> 册 数 < /th> 
</tr> 


2.10 图 书 统计 表 


<tr> 
<td rowspan= "3"> 数 据 库 < /td> 
<tq>《 数 据 库 原理 》< /td> 
<td> 1< /td> 

</tr> 

<tr> 
<tq>《oracle 数 据 库 管理 与 开发 )< /td> 
<td>2< /td> 
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</tr> 

i 
<tq>《Ooracle 10g 基础 教程 < /td> 
<td>2</td> 

ets 

E> 
<td> Java< /td> 
<td>《uava 实用 程序 设计 》< /ta> 
<td> 4< /td> 

</tr> 

<tr> 
<td colspan=2> 总 计 < /td> 
<td> 9< /td> 

/tr 

</table> 


4. 知识 运用 
完成 如 图 2. 11 所 示 表 格 的 制作 。 

跨 两 行 效果 : 
隆 名 | 导 立 


星 名 电话 电话 ps5577854 
匡 成 155577854155577855| 155577855 


跨 两 列 效果 : 


































































































图 2.11 表格 制作 


2 TE 


通常 ,用 户 需 要 在 网 页 上 输入 信息 ,与 服务 器 完成 交互 功能 。 例 如 ,填写 姓名 、 地 址 ， 
选择 性 别 , 从 列表 中 选择 项 目 等 ,这 时 就 要 使 用 表单 。 

表单 是 一 个 包含 表单 元 素 的 区 域 。 表 单元 素 是 允许 用 户 在 表单 中 (如 文本 域 .下 拉 列 
表 、 单 选 框 复 选 框 等 ) 输 入 信息 的 元 素 。 


2.4.1 常用 表单 元 素 
1. 表单 


表单 使 用 表单 标签 二 form 之 界定 ,其 他 的 表单 元 素 应 该 放 在 一 对 二 form 之 一 /form> 标 
签 中 间 。 


2. 文 本 框 
当 用 户 要 在 表单 中 键入 字母 .数字 等 内 容 时 ,就 会 用 到 文本 框 (text fields)。 文 本 框 
使 用 输入 标签 二 input> ,输入 类 型 是 由 类 型 属性 type 定义 的 。 
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例如 : 


<form> 
First name: < input type= "text" name= "firstname" /> 
Last name: < input type= "text" name= "lastname" /> 
</form> 


浏览 器 显示 如 图 2. 12 所 示 。 在 大 多 数 浏览 器 中 ,文本 框 的 默认 宽度 是 20 个 字符 。 





First name: | Last name: 
图 2.12 文本 框 
3. 密码 框 
密码 框 的 作用 是 收集 用 户 键 入 的 密码 ,以 隐藏 的 形式 显示 。 
例如 : 
<form> 


密码 : < input type= "password" name= "passwd"> 
< /form> 


浏览 器 显示 如 图 2. 13 所 示 。 
4. 单 选 按钮 


当 用 户 从 若干 给 定 的 选择 中 选取 其 一 时 ,就 会 用 到 单 选 按钮 (radio buttons) 。 
例如 : 
<form> 


性 别 : <input type= "radio" name= "sex" value= "male"> 男 
< input type= "radio" name= "sex" value= "female"> 女 


< /form> 
name 相同 的 单 选 按钮 只 能 有 一 个 被 选中 。 浏 览 器 显示 如 图 2. 14 所 示 。 
密码; [eve] 性 别 ，@ 男 C 女 
图 2.13 密码 框 图 2.14 单 选 按钮 
5. 复 选 杠 


当 用 户 需要 从 若干 给 定 的 选择 中 选取 一 个 或 若干 选项 时 ,就 会 用 到 复 选 框 。 
例如 : 


< form> 
爱好 > 
< input type= "checkbox" name= "hobby" value= "1"> 读 书 
< input type= "checkbox" name= "hobby" value= "2"> 音 乐 
< input type= "checkbox" name= "hobby" value= "3"> 运 动 


</form> 
浏览 器 显示 如 图 2. 15 所 示 。 
6. 下拉 列表 


下 拉 列 表 可 以 为 用 户 提供 备 选 项 。 
例如 : 


<form> 
学 历 : 
<select name= "degree"> 
<option value="0">-- 请 选择 --</option> 
<option value= "1l"> 专 科 < /option> 
2"> 本 科 < /option> 
<option value= "3"> 硕 士 < /option> 
<option value="4"> 博 士 及 以 上 < /option> 
</select> 
< /form> 


浏览 器 显示 如 图 2. 16 所 示 。 
以 下 代码 为 分 组 下 拉 列 表 , 显 示 结 果 如 图 2. 17 所 示 。 


<select> 
<optgroup label= "咖啡 "> 
<option value="a"> 白 咖啡 < /option> 
<option value= "b"> 黑 咖啡 < /option> 
< /optgroup> 
<optgroup label=" 茶 "> 
<option value= "c"> 红 茶 < /option> 
<option value="d"> 绿 茶 < /option> 
< /optgroup> 
</select> 


以 下 代码 为 多 选 下 拉 列 表 , 显 示 结 果 如 图 2. 18 所 示 。 





<option value= 





<select size="4" mltiple= "multiple"> 
<option value="a"> 果 汁 < /option> 
<option value="b"> 牛 奶 < /option> 
<option value="c"> 茶 < /option> 
<option value="d"> 咖 啡 < /option> 
</select> 





图 2.16 下 拉 列 表 图 2.17 分 组 下 拉 列 表 


a 


弟 (2 章 HIM 过 二 


爱好 ， 口 读书 区 音乐 口 运动 


图 2.15 复 选 框 


加 


图 2.18 多 选 下 拉 列 表 
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7. 文 本 域 


文本 域 控件 用 于 输入 多 行文 本 。 
例如 : 


< form> 
备注 : <textarea name= "comment" rows="5" cols= "30"> < /textarea> 
</form> 
浏览 器 显示 如 图 2. 19 所 示 。 
8. 按钮 
备注 ， 图 
Zh =<» 和 4 让 :省 9 
四 a 提交 ”按钮 “ 重 置 "按钮 和 “普通 ”按钮 
当 用 户 单 击 “ 提 交 ” 按 钮 (submit) 时 ,表单 的 内 容 会 被 传送 到 另 一 个 文件 。 表 单 的 动 
作 属 性 (action) 定 义 了 目的 文件 的 文件 名 。 由 动作 属性 定义 的 这 个 文件 通常 会 对 接收 到 
的 输入 数据 进行 相关 的 处 理 。 例 如 以 下 代码 ,假如 在 文本 框 内 键入 几 个 字母 ,并 且 单 击 
“提交 ”按钮 ,那么 输入 数据 会 被 传送 到 名 为 html_form_action. jsp 的 页 面 。 


<formame= "input"action= "html form action.jsp"method=- "get"> 
Username :< inputtype= "text"name= "User"> 
<inputtype= "submit"value= "提交 "> 

< /form 


当 用 户 单 击 “ 重 置 "按钮 (reset) 时 ,表单 的 控件 会 被 重 置 ,用 户 填写 的 内 容 会 被 清空 。 
利用 value 属性 可 以 对 按钮 上 的 文字 进行 自 定 义 。 
例如 : 


< form> 
<input type= "submit" value= "提交 "> 
<input type= "reset" value-" 重 置 "> 
<input type= "button" value= "返回 "> 
</form> 


弄 | 丁 到 本 | 
览 器 显示 如 医 示 
浏览 器 显示 如 图 2. 20 所 示 。 sa 
9. 隐藏 字段 


隐藏 字段 的 作用 是 需要 表单 完成 一 些 特定 操作 ,而 这 些 操作 是 不 需要 用 户 看 到 的 , 典 
型 的 应 用 场合 就 是 在 页 面 之 间 传 递 参数 值 。 当 需要 传递 一 些 参数 值 而 不 想 让 用 户 看 到 
时 ,就 可 以 使 用 隐藏 字段 。 

例如 : 


<form> 


< input type= "hidden" name= "userId" value= "1001"> 


人 OE rm 


< /form> 


2.4.2 项 目 : 个 人 信息 统计 表 
1. 项 目 概述 


制作 如 图 2. 21 所 示 的 信息 统计 表 , 为 了 进行 用 户 个 人 信息 统计 ,需要 用 户 输入 的 信 


息 包括 姓名 、 年 龄 .性别 、 爱 好 、 学 历 和 自我 介绍 。 
2. 项 目 设计 


在 网 页 上 进行 信息 的 输入 ,需要 根据 输入 的 内 容 选 用 
不 同 的 表单 控件 。 输 入 姓名 、 年 龄 可 以 使 用 文本 框 , 输 入 
性 别 可 以 使 用 单 选 按钮 ,输入 爱好 可 以 使 用 复 选 框 ,输入 
学 历 可 以 使 用 下 拉 列 表 框 ,输入 自我 介绍 可 以 使 用 文本 
域 ,“ 提 交 ” 按 钮 用 来 将 表单 的 内 容 提 交 到 服务 器 ,“ 重 置 ” 
按钮 可 以 清除 表单 控件 中 的 内 容 , 方 便 重新 填写 。 

首先 ,把 表单 控件 置 于 表格 中 ,使 用 一 个 8 行 2 列 的 
表格 控制 整体 的 布局 。 其 次 ,制作 表单 需要 二 form 二 标签 ， 
其 他 的 表单 控件 元 素 都 要 位 于 一 对 二 form> 二 /form> 标 签 
中 间 。 用 到 的 表单 控件 包括 二 input type 二 "text" 二 文本 
框 、 过 input type 一 "radio" 之 单 选 按钮 .二 input type 一 























图 2.21 信息 统计 表 


"checkbox" 过 复 选 框 ` 一 select 二 一 option 二 一 /option 二 二 /select 二 下 拉 列 表 、 一 textarea 二 
二 /textarea 二 文本 域 . 一 input type 一 "submit" 过 提交 按钮 .一 input type 一 "reset" 二 重 置 


按钮 。 
3. 项 目 实施 
本 项 目 代码 如 下 。 


<html> 
<head> 
<title>html 示例 < /title> 
</head> 
<body> 
< form action= "do.action" name= "fm" method= "post"> 
<table border= "1"> 
KE 
<th colspan= "2"> 信 gnbsp; gnbsp; 息 snbsp; &nbsp; 统 snbsp; gnbsp; 计 gnbsp; 
&nbsp; 表 < /th> 
< /tr> 
st 
<td> 姓 名 :< /td> 


EE 
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<td>< input type= "text" name= "name" size= "20"></td> 
</tr> 
tr> 
<td> 年 龄 :< /td> 
<td> < input type= "text" name= "age" size= "20">< /td> 
</tr> 
<tr> 
<td> 性 别 :< /tq> 
<td> < input type= "radio" name= "sex" value="1" checked= "checked"> 男 
< input type= "radio" name= "sex" value="0"> 女 
</td> 
</tr> 
EE 
<td> 爱 好 :< /td> 
<td> 
< input type= "checkbox" name= "interest" value="1"> 旅 游 <br> 
< input type= "checkbox" name= "interest" value= "2"> 登 山 <br> 
< input type= "checkbox" name= "interest" value="3"> 健 身 <br> 
< input type= "checkbox" name= "interest" value= "4"> 上 网 <br> 
< input type= "checkbox" name= "interest" value="5"> 游 泳 <br> 
</td> 
</tr> 
<tr> 
<td> 学 历 :< /td> 
<td> 
<select name= "degree"> 
<option value="">-- 请 选择 --< /option> 
<option value= "1l"> 高 中 < /option> 
<option value= "2"> 专 科 < /option> 
<option value= "3"> 本 科 < /option> 
<option value= "4"> 硕 士 < /option> 
<option value= "5"> 博 士 < /option> 
</select> 
</to> 
</tr> 
<tr> 
<td> 自 我 介绍 :< /td> 
<td><textarea name= "intro" rows= "5" cols= "20"> 自 我 介绍 :< /textarea>< /td> 
< /tr> 
<tr> 
<td> gnbsp;< /td> 
<td><input type= "submit" name= "sm" value= "提交 "> 
<input type= "reset" name= "rs" value= " 重 置 ">< /td> 
< 
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</table> 

< /form> 

< /body> 

</html> 

需要 说 明 的 是 ,本 项 目 中 ,表格 用 来 布局 ,表单 用 来 传输 数据 。 可 以 在 表格 中 包含 表 
单 ,如 果 有 数据 要 传送 给 后 台 程 序 ,通常 需要 将 表单 元 素 放 到 表单 中 ,从 而 完成 数据 提交 。 
当 完成 本 项 目 时 ,对 表单 元 素 进 行 填写 并 单 击 “ 提 交 ”按钮 ,就 会 向 服务 器 端 提交 信息 。 可 
以 通过 查看 地 址 栏 了 解 单 击 “ 提 交 ” 按 钮 后 的 变化 。 


4. 知识 运用 


完成 图 2. 22 所 示 网 站 注册 界面 的 表单 设计 ,要 求 使 用 文本 框 , 密 码 框 , 单 选 框 、 下 拉 
列表 、 文 本 区 域 .按钮 等 表单 元 素 , 并 对 必 填 项 标识 “ 星 号 ”使 用 红色 提示 ,服务 条 款 、 忘 记 
密码 ,忘记 用 户 名 等 处 使 用 超 链接 功能 。 


密码 # 
“三 


密码 确认 * 


姓名 * 





证 件 类 型 * | 居民 身份 证 bd 











证 件 号 码 * 


安全 邮箱 * sohu 邮 箱 无 法 接收 本 网 邮件 ， 请 使 用 其 他 有 效 邮 箱 





密 保 问题 1 * | 请 法 择 v| 知 宇 








密 保 问题 2 * | 请 计 择 v| 等 二 














密 保 问题 3 * | 请 经 v| 答案 





我 已 阅读 并 同意 服务 条 款 


图 2.22 网 站 注册 界面 
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本 项 目 属于 综合 项 目 中 的 首页 中 的 全 部 商品 分 类 部 分 的 实现 ,需要 用 到 本 章 所 学 的 
列表 、 超 链接 等 标签 。 

(1) 使 用 列表 标签 定义 每 一 个 商品 分 类 。 

(2) 使 用 超 链接 标签 呈现 每 一 项 商品 分 类 和 分 类 子 项 。 
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2.5.1 项 目 说 明 


在 咖啡 销售 网 站 的 首页 面 需要 列举 全 部 商品 分 类 , 供 顾 客 检索 到 分 类 商品 。 商 品 共 
分 为 11 个 类 ,每 个 分 类 下 会 有 若干 子 类 ,用 户 单 击 某 个 子 类 的 链接 时 ,将 进入 该 子 类 商品 
的 展示 页 面 。 

“全 部 商品 分 类 . html” 的 显示 结果 如 图 2. 23 所 示 。 

















- o 攻 至 
(Owes rsh DP- ol 8=mme x 国 宰 妆 可 
文 作 (编号 6 查看 (V) 收 应 夫 (A) 工具 (者 助 (H) 
全 部 商品 分 类 
白 咖啡 
太 马 白 咖啡 | 白 曙 啡 


咖啡 | 和 啡 生 豆 | 有 机 咖 里 | 咖 员 春 
dns 有 
识 泡 过 | 压 奉 器 | 碳 兴 盒 | 滤纸 /滤器 /起 布 / 滤 杯 | 光波 妨 | 其 它 


咖啡 原料 
于 | 加 党 和 里 | 纯 咖啡 
器 嘲 铺 料 





咖啡 过 
和 虹吸 竟 | 摩卡 这 | 法 式 压 过 | 手 油 咎 啡 过 | 比利时 咖啡 可 | 虹 叶 过 | 滴 这 | 土耳其 过 咖啡 过 
| 直击 注 汤 态 | 其 它 

咖 嘲 研 记 机 
申 动 磨 百 机 | 手动 床 豆 机 

咖啡 标 / 杯 类 


咖啡 机 涩 性 
咖啡 机 清洁 粮 
咽 啡 厅 相 关 设 备 
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2.5.2 项 目 设计 


列表 使 用 定义 列表 二 dl 二 二 /dl 二 实现 ,每 一 个 分 类 使 用 一 个 定义 列表 ,分 类 名 称 写 
在 一 对 二 dt 二 二 /dt 二 标签 中 间 , 分 类 子 项 写 在 一 对 二 dd 记 二 /dd 二 标签 中 间 , 其 中 的 每 一 
项 又 是 一 个 超 链接 。 
可 以 使 用 以 下 结构 定义 商品 分 类 以 及 分 类 子 项 。 
xl> 
<dt> 分 类 名 称 < /dt> 


<dd><a> 子 分 类 1</a> 1<a> 子 分 类 2< /a> Il<a> 子 分 类 3< /a>< /dd> 
</dl> 


2.5.3 项 目 实施 
本 项 目 代 码 如 下 。 


全 多 rm 是 


< !DOCTYPE html> 
<html> 
<head> 
<meta charset= "UTF- 8"> 
<title> Insert title here< /title> 
< /head> 
<body> 
<h2> 全 部 商品 分 类 < /h2> 
<div> 
<dl> 
<dt> 
<a href=""> 白 咖啡 </a> 
</dt> 
<dd> 
<a href=""> 大 马 白 咖 啡 < /a> 1<a href= ""> 白 咖啡 < /a> 
</dd> 
</dl> 
<dl> 
<dt> 
<a href=""> 咖 啡 < /a> 
</dt> 
<dd> 
<ahref=""> 咖 啡 豆 </a> |<a href=""> 咖 啡 生 豆 </a> Il<a href=""> 有 机 咖啡 
</a> |<ahref= ""> 咖 啡 胶囊 < /a> 
</dd> 
</dl> 
… 此 处 省 略 43 行 代码 … 
<dl> 
<dt> 
<a href="> 咖 啡 杯 / 杯 类 < /a> 
</dt> 
</dl> 
<dl> 
<adt> 
<ahref= ""> 咖 啡 机 零件 < /a> 
</dt> 
<dd> 
<a href=""> 咖 啡 机 清洁 粉 < /a> 
</dd> 
</dl> 
<dl> 
<dt> 
<a href-=""> 咖 啡 厅 相关 设备 < /a> 
</dt> 
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</dl> 
</div> 
< /body> 
</html> 


习 题 


1. 编写 出 实现 如 图 2. 24 所 示 页 面 效 果 的 关键 HTML 代码 。 其 中 ,A、B、C、D\E 均 
为 默认 字号 和 默认 字体 ,并 且 加 粗 显示 ,它们 都 位 于 各 自 单元 格 的 正中 间 ,A 单元 格 的 高 
度 为 200 像素 ,B 单元 格 的 高 度 为 100 像素 ,C 单元 格 的 宽度 为 100 像素 ,高 度 为 200 
像素 。 














图 2.24 示例 页 面 





2. 如 图 2. 25 所 示 ,请 写 出 该 网 页 的 完整 HTML 代码 。 





图 2.25 示例 页 面 
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HTML5 新 增 元 素 和 属性 


本 章 概述 

通过 本 章 的 学 习 , 学 生 能 够 了 解 HTML5 的 新 增 元 素 和 属性 的 作用 和 用 法 ,学 会 使 
用 HTML 新 增 元 素 进 行 网 页 开发 。 通 过 HTML5 的 实际 案例 的 编写 过 程 , 学 习 
HTML5 的 新 特性 ,体会 HTML5 与 HTML4 的 区 别 , 掌 握 HTML 新 增 元 素 的 语法 
结构 。 

学 习 重 点 与 难点 

重点 : 

(1) HTML5 文档 结构 元 素 的 使 用 。 

(2) HTML5 新 增 输入 类 型 的 使 用 。 

难点 : 

(1) HTML5 文档 结构 元 素 各 自 不 同 的 含义 和 使 用 场合 。 

(2) HTML5 新 增 表单 输入 类 型 和 属性 的 含义 以 及 用 法 。 

重点 及 难点 学 习 指 导 建 议 : 

。 先 理 解 HTML5 中 引入 哪些 新 的 语义 元 素 和 表单 元 素 。 

。 对 常用 的 语义 和 表单 元 素 进 行 强化 记忆 和 项 目 案例 编程 练习 。 

。 在 此 基础 上 独立 完成 每 个 章节 中 的 知识 运用 部 分 ,体会 使 用 到 的 知识 点 的 具体 

作用 。 
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3.1 新 增 文档 结构 元 素 


HTML5 是 下 一 代 的 HTML。HTML 的 上 一 个 版 本 诞生 于 1999 年 ,在 1999 年 12 
月 ,万 维 网 联盟 (World Wide Web Consortium,W3C) 网 络 标准 化 组 织 推出 HTML4. 01， 
按 W3C 最 初 的 设想 , HTML4. 01 应 该 是 HTML 规范 的 最 后 一 个 版 本 ,此 后 将 使 用 
XHTML 取而代之 ,但 Web 开发 人 员 显 然 更 希望 使 用 改良 式 的 解决 方案 。2014 年 10 月 
29 日 , W3C 宣布 ,经 过 将 近 8 年 的 艰苦 努力 ,HTML5 标准 规范 终于 制定 完成 。HTML5 
的 设计 目的 是 为 了 在 移动 设备 上 支持 多 媒体 。 新 的 语法 特征 被 引进 以 支持 这 一 点 ,如 
video audio 和 canvas 标签 。HTML5 还 引进 了 新 的 功能 ,可 以 真正 改变 用 户 与 文档 的 交 
互 方式 。HTML5 是 开放 Web 标准 的 基石 , 它 是 一 个 完整 的 编程 环境 ,适用 于 跨 平台 应 
用 程序 视频 和 动画 、 图 形 、 风 格 、 排 版 和 其 他 数字 内 容 发 布 工 具 、 广 泛 的 网 络 功 能 等 。 
HTML5 将 成 为 HTML、XHTML 以 及 HTML DOM 的 新 标准 。Safari4 十 、Chrome、 
Firefox、Opera 以 及 Internet Explorer 9 十 都 支持 HTML5。 


3.1.1 认识 HTMLS 


自 2006 年 起 ,W3C 与 网 页 超 文本 应 用 技术 工作 小 组 (Web Hypertext Application 
Technology Working Group, WHATWG ) 双方 决定 进行 合作 ,创建 一 个 新 版 本 的 
HTML。HTML5 是 开放 的 Web 网 络 平台 的 奠基 石 。HTML5 的 设计 目的 是 为 了 在 移 
动 设备 上 支持 多 媒体 ,其 新 的 语法 特征 被 引进 ,以 支持 这 一 点 ,如 video、audio 和 canvas 
标签 。HTML5 还 引进 了 新 的 功能 ,可 以 真正 改变 用 户 与 文档 的 交互 方式 。 

HTML5 的 优点 主要 包括 : 

(1) 提高 可 用 性 和 用 户 体验 。 

(2) 增加 新 的 标签 ,有 助 于 开发 人 员 定义 重要 的 内 容 。 

(3) 给 站 点 带 来 更 多 的 多 媒体 元 素 ( 视 频 和 音频 ) 。 

(4) 很 好 地 替代 Flash 和 SilverLight。 

(5) 当 涉及 网 站 的 抓 取 和 索引 时 ,对 于 SEO( 搜 索引 擎 优化 ) 很 友好 。 

(6) 将 被 大 量 应 用 于 移动 应 用 程序 和 游戏 。 

(7) 可 移植 性 好 。 

由 于 各 种 原因 ,HTML5 废除 了 很 多 元 素 , 主 要 包括 : 

。 可 以 用 CSS 代替 的 元 素 。 

例如 ,big center font、strike、basefont、s、tt、u 等 元 素 , 它 们 均 是 纯粹 地 定义 显示 效 
果 的 元 素 , 而 在 HTML5 中 ,提倡 把 定义 显示 效果 的 代码 统一 放 在 CSS 样式 表 中 ,因此 以 
上 元 素 在 HTML5 中 不 再 使 用 ,而 是 使 用 CSS 样式 替代 。 

。 frame frameset 和 noframes。 

对 于 frame frameset 和 noframes 元 素 , 由 于 frame 框架 对 网 页 可 用 性 存在 负面 影 
响 , 所 以 HTML5 中 已 经 不 支持 frame 框架 ,只 支持 iframe 框架 ,或 者 使 用 服务 器 端 创建 
的 由 多 个 页 面 组 成 的 复合 页 面 形式 。 
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。 不 被 所 有 浏览 器 支持 的 元 素 。 

对 于 applet、bgsound、marquee 等 元 素 , 由 于 只 有 部 分 浏览 器 支持 这 些 元 素 , 特 别 是 
bgsound 和 marquee 元 素 ,只 有 IE 浏览 器 支持 ,因此 ,在 HTML5 中 ,这 些 元 素 被 废除 。 
其 中 ,二 applet 二 元 素 可 由 embed 元 素 或 object 元 素 替 代 ,bgsound 元 素 可 由 audio 元 素 
替代 ,marquee 元 素 可 由 JavaScript 编程 方式 替代 。 

。 其 他 被 废除 的 元 素 。 


如 acronym ,dir rb \isindex \listing、xmp nextid、plaintext 等 元 素 。 
3.1.2 HTMLS 页 面 结构 

通过 之 前 的 学 习 , 我 们 都 知道 在 HTML4. 01 中 有 3 个 不 同 的 文档 类 型 , 而 在 
HTML5 中 , 则 只 有 一 个 。 

< IDOCTYPE HTML> 

在 HTML5 中 ,二 I!IDOCTYPE 放 声明 必须 位 于 文档 中 的 第 一 行 ,也 就 是 位 于 二 html 二 
标签 之 前 。 该 标签 告知 浏览 器 文档 使 用 的 HTML 规范 。 所 有 HTML 文档 中 均 规定 


DOCTYPE 是 非常 重要 的 ,这 样 浏览 器 就 能 了 解 预期 的 文档 类 型 。 
具有 正确 文档 类 型 (DOCTYPE) 的 HTML5 文档 代码 如 下 。 





< !DOCTYPE HTML> 
<htm> 
<head> 
<title>Title of the document< /title> 
< /head> 
<body> 
The content of the document… 
< /body> 
</htm> 
HTML5 的 文件 类 型 和 内 容 类 型 与 HTML4. 01 相同 ,仍然 保存 为 . html 或 . htm 文 
件 , 内 容 类 型 仍然 是 text/html。 
在 HTML5 中 ,可 以 直接 使 用 二 meta 过 的 charset 属性 指定 字符 编码 ,例如 : 


<meta charset= "UTF- 8"> 
从 HTML5 开始 ,对 文件 的 字符 编码 推荐 使 用 UTF-8。 
3.1.3 HTMLS5 主体 结构 元 素 


HTML5 吸取 了 XHTML2 的 一 些 建 议 ,为 了 使 文档 的 结构 更 清晰 、 明 确 , 新 增 了 一 
些 改善 文档 结构 的 元 素 , 如 header、footer、article、aside、section 等 ,这 使 得 开发 人 员 可 以 
更 加 语义 化 地 创建 文档 ,而 在 之 前 的 HTML4 中 ,开发 者 实现 这 些 功 能 时 一 般 都 使 用 div。 

HTML5 的 主体 结构 元 素 主要 包括 : article 元 素 、section 元 素 .nav 元素 .aside 元 素 
和 time 元 素 。 
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1. article 元 素 


article 元 素 表示 独立 完整 .可 独自 被 外 部 引用 的 内 容 ( 如 文章 .帖子 .评论 或 者 独立 
的 插件 等 ) 。article 元 素 可 以 嵌 套 使 用 ,内 层 内 容 原 则 上 需要 与 外 层 内 容 关 联 。 例 如 , 针 
对 一 篇 文章 的 评论 就 可 以 使 用 嵌 套 article 元 素 的 方式 ,呈现 文章 评论 的 article 元 素 嵌 套 
在 表示 文章 整体 内 容 的 article 元 素 的 里 面 。 

例如 : 


<article> 
<header> 
<a href= "http://www.w3.o0rg/html /10go/"> HIML5 TECHNOLOGY< /a><br/> 
< /header> 
<p> 
Imagination, meet implementation. HIML5 is the cornerstone of the W3C ' s open web 
platform; 
a framework designed to support innovation and foster the full potential the web has to 
offer.?..... 
</p> 
<section> 
<h2> 评 论 < /h2> 
<article> 
<header> 评 论 者 : 张 三 < /header> 
< p> HTML5 identity system provides the visual vocabulary to clearly 
classify and communicate our collective efforts.< /p> 
</article> 
< /section> 


</article> 
2. section 元 素 


section 元 素 用 于 对 网 站 或 应 用 程序 中 页 面 上 的 内 容 进 行 分 块 , 通 常 由 标题 及 内 容 组 
成 ,但 section 元 素 并 非 一 个 普通 的 容器 元 素 , 当 一 个 容器 需要 被 直接 定义 样式 或 行为 时 ， 
推荐 使 用 div, 而 非 section 元 素 。 

section 元 素 强 调 分 段 和 分 块 ,而 article 元 素 则 是 强调 独立 性 。 

section 的 使 用 注意 事项 包括 : 

(1) 不 要 用 section 做 设置 样式 的 容器 ,这 时 应 该 使 用 div。 

(2) 如 果 article、aside、nav 元 素 更 适合 ,就 不 要 使 用 section。 

(3) 不 要 给 没有 标题 的 内 容 区 块 使 用 section, 可 以 使 用 HTML5 轮廓 工具 检查 页 面 
中 是 否 有 没有 标题 的 section。HTML5 轮廓 工具 的 网 址 为 http://gsnedders. html5. 
org/outliner/ 。 


例如 : 
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<section> 

<hl>HTML5< /hl> 

<p> HyperText Markup Language 5< /p> 
< /section> 


3. nav 元 素 


nav 元 素 用 于 表示 页 面 导 航 链接 的 部 分 。 

nav 的 使 用 场合 主要 有 : 

(1) 传统 导航 条 。 

(2) 侧 边栏 导航 。 

(3) 页 内 导航 。 

(4) 翻 页 操作 。 

需要 注意 的 是 ,不 要 用 menu 元 素 代替 nav,menu 是 交互 性 元 素 ,使 用 在 Web 程 
序 中 。 
例如 : 


<hl> HTML5< /hl> 
<nav> 
<ul> 
<1i><a href= 哇 "> 首页 </a></1i> 
<1i><a href= 哇 "> 课程 介绍 </a>< /li> 
</ul> 


</nav> 
4. aside 元 素 


aside 元 素 用 于 表示 article 元 素 的 内 容 之 外 的 ,与 article 元 素 的 内 容 相关 的 页 面 或 
文章 附属 信息 。 

aside 元 素 的 使 用 场合 包括 : 

(1) 包含 在 article 中 ,作为 主要 内 容 的 附属 信息 ,表示 与 当前 文章 相关 的 参考 资料 、 
名 词 解 释 等 。 

(2) 在 article 之 外 使 用 ,作为 页 面 和 站 点 全 局 的 附属 信息 。 

例如 : 


<article> 
<h2> 章 节 列 表 < /h2> 
<ul> 主 要 内 容 < /ul> 
</article> 
<aside> 
< section><h3> HTML5 新 增 元 素 < /h3>< /section> 
<section><h3>HTML5 新 增 属 性 < /h3> < /section> 


</aside> 
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5. time 元 素 


time 元 素 代表 24 小 时 中 的 某 个 时 刻 或 某 个 日 期 ,表示 时 刻 时 允许 带 时 差 。 它 可 以 
定义 很 多 格式 的 日 期 和 时 间 。 它 的 datetime 属性 用 于 定义 元 素 的 日 期 和 时 间 。 如 果 未 
定义 该 属性 , 则 必须 在 元 素 的 内 容 中 规定 日 期 或 时 间 。 例 如 


<p> 我 们 在 每 天 早上 <time> 8:00< /time> 开 始 上 课 。< /p> 
<p> HTML5 于 <time datetime="2014- 10- 29"> 2014 年 < /time> 制 定 完 成 。< /p> 





3.1.4 HTMLS 非 主体 结构 元 素 


1. header 元 素 


header 元 素 是 具有 引导 和 导航 作用 的 辅助 元 素 ,表示 页 面 中 一 个 内 容 区 块 或 整个 页 
面 的 标题 。 
例如 : 


<header> 
<hl>Welcome to my homepage< /hl> 
<p>My name is Donald Duck< /p> 

< /header> 


<p> The rest of my home page.. .< /p> 
2. hgroup 元 素 


hgroup 元 素 用 于 对 整个 页 面 或 页 面 中 一 个 内 容 区 块 的 标题 进行 组 合 。 因 为 页 面 中 
有 时 候 除 了 主 标题 ,可 能 还 需要 子 标题 ,副标题 .宣传 请: 这 时 就 需要 对 标题 进行 组 合 。 
例如 : 


<article> 
<header> 
<hgroup> 
<hl> 文 章 主 标题 < /hl> 
<h2> 文 章 子 标题 < /h2> 
</hgroup> 
<p><time datetime= "2013- 03- 20"> 2013 年 10 月 29 日 < /time></p> 
</header> 
<p> 文 章 正文 </p> 


</article> 


3. footer 元 素 





footer 元 素 用 于 表示 整个 页 面 或 页 面 中 一 个 内 容 区 块 的 脚注 ,可 以 做 一 个 区 块 的 尾 
部 内 容 ,通常 包括 一 些 附 加 信息 ,如 文档 作者 、 创 作 日 期 .联系 信息 .相关 链接 及 版 权 信 息 。 
例如 : 
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< footer> 
<ul> 
<1i> 版 权 信息 < /1i> 
<1i> 站 点 地 图 < /1i> 
<1i> 联 系 方式 < /1i> 
ly 
< /footer> 
4. address 元 素 


address 元 素 用 于 呈现 联系 信息 ,如 姓名 、 地 址 、 网 站 、 邮 箱 等 联系 方式 。 
例如 : 


< footer> 
<div> 
<address> 
<a title=" 文 章 作 者 : 张 三 " href= 叶 "> 张 三 </a> 
</address> 
发 表 于 <time datetime= "2015-08- 01"> 2015 年 08 月 01 日 </time> 
</div> 
</footer> 


3.1.5 项 目 : 新 闻 评论 网 
1. 项 目 说 明 


编写 一 个 展示 新 闻 评论 的 HTML 页 面 ,使 用 HTML5 提供 的 文档 结构 元 素 显 示 整 
个 网 页 的 标题 .网 站 导航 链接 、 新 闻 标题 ,新闻 正文 .新 闻 评 论 等 内 容 。 
新 闻 评 论 页 面 如 图 3. 1 所 示 。 





360 新 闻 网 
美国 航天 局 发 现 第 二 个 “地 球 ” 
os ora on 二 和 

据 条 华 社 洛 档 W17 月 238 吉美 国航 天 局 23 日 在 告 频 和 闻 类 市 会 上 宣布 ， 天 文学 家 通过 开 痊 蒜 太 宝 望 远 术 确认 在 宜 导 项 发 现 第 一 条 与 地 球 太 小 相似 、 图 找 闪 似 太 阳 的 恒 旦 证 行 的 太阳 系 外 行星 、 


这 颗 被 遇 名 为 开 症 秆 一 432b 的 行星 比 地 球 大 60 各 ， 公 竺 周期 为 385 天 ， 只 比 地 球 公转 周期 长 5%。 其 绕 特 的 全 竺 也 与 太阳 粘 似 ，~ 年 航 " 为 60 亿 岁 ， 比 本 阳 大 15 亿 年 ， 它 与 厅 阳 的 温度 类 羽 。 质 量 
比 太阳 大 4 ， 直 径 比 本 附 大 105 ， 比 庆 阳 明 莹 20 站 - 


评论 

区 各 

就 卫 用 每 种 30 万 十 米 的 这 康 行 也 秀 要 1400 年 的 时 间 ， 所 以 我 们 并 不 能 过 去。 
所 有 ;350 新 间 同 















图 3.1 新 闻 评 论 页 面 


2. 项 目 设计 
本 项 目 需要 使 用 HTML5 中 新 增 的 文档 结构 元 素 定义 一 个 HTML 页 面 。 本 项 目 需 
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要 实现 的 页 面包 括 标题 . 导航、 正文 、 页 脚 等 部 分 ,可 以 使 用 HTML5 中 新 增 的 文档 结构 
元 素 分 别 定义 每 一 个 部 分 ,使 页 面 结构 更 清晰 .明确 ,以 更 加 语义 化 的 方式 创建 HTML 

(1) 首先 ,在 HTML 页 面 主体 部 分 使 用 一 header 过 元素 ,定义 整个 页 面 的 标题 。 在 
一 header 二 元 素 中 使 用 二 nav 二 元 素 指 明 网 站 的 导航 链接 部 分 。 

(2) 在 二 header 过 元素 下 方 使 用 一 article 之 元 素 表示 文章 正文 部 分 。 在 二 article 二 元 
素 中 使 用 二 hgroup 过 元 素 表示 文章 内 容 区 块 中 的 主 标题 、 副 标题 组 合 ,使 用 二 section 二 元 
素 表示 文章 内 容 的 另 一 区 块 一 一 文章 评论 区 块 。 

(3) 在 结尾 处 使 用 一 footer 盖 元 素 表 示 整 个 页 面 的 版 权 信息 。 


3. 项 目 实施 


使 用 3.1.4 节 介绍 的 HTML5 中 新 增 的 用 于 描述 文档 语义 结构 的 元 素 ,创建 如 
图 3.1 所 示 的 新 闻 评 论 页 面 。 


本 项 目 代 码 如 下 。 
<html> 
<head> 
<meta charset= "UTF- 8"> 
< /head> 
<body> 
<!-- 网 页 标题 --> 
<header> 
<hl>360 新 闻 网 < /hl> 
< 上 二 -网 站 导航 链接 --> 
<nav> 
<ul> 


<1i><a href="index.html"> 首 页 </a></li> 
<1li><a href- "help.html"> 帮 助 </a></1i> 


</ul> 
</nav> 
</header> 
RE 区 章 下 区 二 = 学 
<article> 
<hgroup> 


<hl> 美 国航 天 局 发 现 第 二 个 "地 球 "< /hl> 
<p>< small> < time pubdate= "pubdate" datetime="2015- 07- 25 T09:11"> 2015- 07- 25 
09:11< /time> 来 源 : 咸宁 日 报 我 有 话说 < /small>< /p> 
< /hgroup> 
<p> snbsp; gnbsp; gnbsp; gnbsp; 据 新 华 社 洛杉矶 7 月 23 日 电 美国 航天 局 23 日 在 音频 新 闻 发 
布 会 上 宣布 ,天 文学 家 通过 开 普 勒 太空 望远镜 确认 在 宜 居 带 发 现 第 一 颗 与 地 球 大 小 相似 、 
绕 类 似 太阳 的 恒星 运行 的 太阳 系 外 行星 。< /p> 
<p> &nbsp; gnbsp; gnbsp; gnbsp; 这 颗 被 命名 为 开 普 勒 - 452b 的 行星 比 地 球 大 60% ,公转 周期 为 385 
天 ,只 比 地 球 公转 周期 长 5% 。 其 绕 转 的 恒星 也 与 太阳 相似 , "年 龄 "为 60 亿 岁 , 比 太阳 大 15 亿 年 ， 
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它 与 太阳 的 温度 类 似 , 质 量 比 太 阳 大 4% ,直径 比 太阳 大 10% , 比 太 阳 明 亮 20%。< /p> 
<!-- 文 章 评论 --> 
<section class= "comments"> 
<h3> 评 论 < /h3> 
<article> 
<p> 匿 名 < /p> 
<p> 就 算 用 每 秒 30 万 千 米 的 速度 飞行 ,也 需要 1400 年 的 时 间 , 所 以 我 们 并 不 能 
过 去 。< /p> 
</article> 
</section> 
</article> 
<!-- 版 权 信 息 --> 
<footer> 
<small> 版 权 所 有 : 360 新 闻 网 < /small> 
< /footer> 
< /body> 
</htm> 


将 以 上 HTML 文件 保存 为 “新 闻 评 论 页 面 . html”, 使 用 浏览 器 打开 ,观察 页 面 上 的 
输出 信息 。 


4. 知识 运用 


运用 HTML5 中 的 文档 结构 元 素 制作 一 个 个 人 日 志 页 面 ,要 求 包 括 日 志 网 站 标题 、 
本 篇 日 志 标题 ,本 篇 日 志 发 表 时 间 、 本 篇 日 志 内 容 、 本 篇 日 志 评 论 、 友 情 链接 、 版 权 声 明 等 。 


32 新 增 表单 元 素 


3.2.1 HTMLS 表单 新 功能 


HTML 表单 一 直 都 是 Web 的 核心 技术 之 一 ,可 以 依靠 它 完成 Web 上 的 各 种 各 样 应 
用 的 输入 界面 ,从 而 使 得 客户 端 和 服务 器 能 够 进行 方便 快捷 的 交互 。HTML5 表单 新 增 
了 许多 新 控件 及 其 API, 方 便 我 们 做 更 复杂 的 应 用 ,而 不 用 借助 其 他 前 端 脚本 语言 ,如 
JavaScript。 

HTML5 拥有 多 个 新 的 表单 输入 类 型 ,这些 新 特性 提供 了 更 好 的 输入 控制 和 验证 ,也 
使 得 表单 结构 更 自由 。 

XHTML 中 需要 放 在 二 form 过 标签 中 的 诸如 input .button .select textarea 等 标签 元 
素 ,在 HTML5 中 完全 可 以 放 在 页 面 的 任何 位 置 ,然后 通过 新 增 的 form 属性 指向 元 素 所 
属 表单 的 ID 值 , 即 可 把 表单 和 表单 元 素 关联 起 来 。 

例如 : 


< form id= "myform">< /form> 


< input type= "text" form- "myform" value=""> 


HIMLS+CSS3+JavaSeript 顺 肯 开发 


3.2.2 HTMLS 表单 新 的 输入 类 型 


HTML5 表单 新 的 输入 类 型 主要 包括 : 

(1) email 输入 类 型 。 

说 明 : 此 输入 类 型 要 求 输入 格式 正确 的 email 地 址 , 若 格式 不 正确 , 则 浏览 器 不 允许 
提交 ,并 会 有 一 个 错误 信息 提示 。 此 类 型 必须 指定 name 属性 值 ,否则 无 效果 。 

格式 : 

<input type= "email " name= "email"> 

(2) url 输入 类 型 。 

说 明 : 此 输入 类 型 要 求 输入 格式 正确 的 URL 地 址 ,车 格式 不 正确 , 则 浏览 器 不 允许 
提交 ,并 会 有 一 个 错误 信息 提示 。Opera 浏览 器 中 会 自动 在 开始 处 添加 “http://”。 

格式 : 

<input type= "url" name= "Url"> 

(3) 日 期 时 间 相关 输入 类 型 。 

说 明 : 这 一 系列 输入 类 型 完全 解决 了 烦琐 的 JS 日历 控件 问题 ,但 目前 只 有 Opera 和 
Chrome 新 版 本 浏览 器 支持 , 且 展 示 效 果 也 不 一 样 。 

格式 ， 


<input type= "date"> 








<input type= "time"> 

< input type= "month"> 

< input type= "week"> 

< input type= "datetime"> 

<input type= "datetime- local"> 

(4) number 输入 类 型 。 

说 明 : 此 输入 类 型 要 求 输入 一 个 数字 字符 , 若 格式 不 正确 , 则 浏览 器 不 允许 提交 ,并 
会 有 一 个 错误 信息 提示 。 

格式 : 


< input type= "number" max= "10" min= "0" step= "1" value="5" /> 
number 输入 类 型 属性 含义 见 表 3. 1 。 
表 3.1 number 输入 类 型 属性 含义 








属性 值 描 述 
max number 规定 允许 的 最 大 值 
min number 规定 允许 的 最 小 值 





step number 规定 合法 的 数字 间隔 (如 果 step 二 "3", 则 合法 的 数 是 一 3,0,3,6 等 ) 











value number 规定 默认 值 
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(5) range 输入 类 型 。 
说 明 : 此 输入 类 型 用 于 输入 应 该 包含 在 一 定 范围 内 的 数字 值 ,显示 为 滑动 条 。 
格式 : 


<input type= "range" max= "10"min= "0" step="1" value="5" /> 
range 输入 类 型 属性 含义 见 表 3. 2。 
表 3.2 range 输入 类 型 属性 含义 




















属性 值 描述 

max number 规定 允许 的 最 大 值 

min number 规定 允许 的 最 小 值 

step number 规定 合法 的 数字 间隔 (如 果 step= 二 "3", 则 合法 的 数 是 一 3,0,3,6 等 ) 
value number 规定 默认 值 


(6) search 输入 类 型 。 

说 明 : 此 输入 类 型 用 于 输入 一 个 搜索 关键 字 , 显 示 为 常规 的 文本 域 。 

格式 : 

< input type= "search"> 

(7) tel 输入 类 型 。 

说 明 : 此 输入 类 型 要 求 输入 一 个 电话 号 码 。 

格式 : 

<input type= "tel" pattern="\d\d\d- \d\d\d\d\d"> 

(8) color 输入 类 型 。 

说 明 : 此 输入 类 型 可 让 用 户 通 过 颜色 选择 器 选择 一 个 颜色 值 ,并 反馈 到 该 控件 的 
value 值 中 。 

格式 : 


< input type= "color"> 
3.2.3 HTMLS 表单 新 的 属性 


HTML5 表单 新 的 属性 主要 包括 : 
(1) placeholder 属性 。 
说 明 : placeholder 属性 提供 一 种 提示 (hint) ,描述 输入 域 所 期 待 的 值 。 提 示 会 在 输 


标签 : text、search、url\telephone、email 以 及 password。 


格式 : 


< input type= "search" name= "user search" Placeholder=- "Search W3School"” /> 
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(2) required/pattern 属性 。 

说 明 : 这 是 HTML5 新 加 的 验证 属性 。 

required 属性 规定 必须 在 提交 之 前 填写 输入 域 , 即 输入 域 不 能 为 空 。required 属性 
适用 于 以 下 类 型 的 二 input 二 标签 : text, search、url, telephone、 email、 password,、 date 
pickers .number checkbox ,radio 以 及 file。 

pattern 属性 规定 用 于 验证 input 域 的 模式 ,pattern 类 型 为 正则 验证 ,可 以 完成 各 种 
复杂 的 验证 。pattern 属性 适用 于 以 下 类 型 的 二 inputQ 二 标签 : text、 search、 url、 
telephone ,email 以 及 password。 


格式 : 


<input name= "require" required> 

<inputname= "requirel" required= "required"> 

<input name= "require2" pattern= "^[1- 9] \d{5}$"> 

(3) autofocus 自动 聚焦 属性 。 

说 明 : autofocus 属性 规定 在 页 面 加 载 时 , 域 自动 获得 焦点 ,可 在 页 面 加 载 时 聚焦 到 
一 个 表单 控件 ,类似 于 JavaScript 的 focus() 方 法 。autofocus 属性 适用 于 所 有 二 input 二 
标签 的 类 型 。 

格式 : 


< input autofocus= "true"> 


(4) autocomplete 自动 完成 属性 。 

说 明 : autocomplete 属性 规定 form 或 input 域 应 该 拥有 自动 完成 功能 。 一 般 来 说 ， 
此 属性 必须 启动 浏览 器 的 自动 完成 功能 。autocomplete 属性 适用 于 二 form 二 标签 ,以 及 
以 下 类 型 的 二 input 二 标签 : text、search、url,telephone、email、password、 date pickers、 
range 以 及 color。 

格式 : 


< input autocomplete= "on/off"> 


(5) novalidate 属性 。 

说 明 : novalidate 属性 规定 在 提交 表单 时 不 应 该 验证 form 或 input 域 。novalidate 
属性 适用 于 二 form 二 以 及 以 下 类 型 的 二 input 二 标签 : text\search url ,telephone .email、 
password date pickers、range 以 及 color。 


< form action= "demo form.asp" method= "get" novalidate= "true"> 


(6) multiple 属性 。 

说 明 : multiple 属性 规定 在 输入 域 中 可 选择 多 个 值 。mnultiple 属性 适用 于 以 下 类 型 
的 一 input 过 标签 : email 和 file。 

格式 : 
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<input type= "file" name= "img" multiple= "multiple" /> 


(7) 表单 重 写 属性 。 
说 明 : 表单 重 写 属性 允许 重 写 form 元 素 的 某 些 属性 设 定 。 表 单 重 写 属性 适用 于 以 











下 类 型 的 二 input 二 标签 : submit 和 image。 


表单 重 写 属性 有 以 下 5 个 。 

formaction: 重 写 表单 的 action 属性 。 

formenctype: 重 写 表单 的 enctype 属性 。 

formmethod: 重 写 表单 的 method 属性 。 

formnovalidate: 重 写 表单 的 novalidate 属性 。 

formtarget: 重 写 表单 的 target 属性 。 

(8) list 属性 。 

说 明 : list 属性 规定 输入 域 的 datalist。datalist 是 输入 域 的 选项 列表 。list 属性 适用 


于 以 下 类 型 的 二 input 之 标签 : text、search、url,telephone、email、 date pickers、number、 


ran 


ge 以 及 color。 
二 datalist 二 标签 用 于 定义 选项 列表 ,要 与 input 元 素 配合 使 用 该 元 素 , 定 义 input 可 


能 的 值 。datalist 及 其 选项 不 会 被 显示 出 来 , 它 仅 是 合法 的 输入 值 列表 。 


使 用 input 元 素 的 list 属性 绑 定 datalist。 
格式 : 


<input list="cars" /> 
<datalist id= "cars"> 
<option value= "BMW"> 
<option value= "Ford"> 
<option value= "Volvo"> 
</datalist> 


3.2.4 项 目 : 订货 人 个 人 信息 页 


页 、 


的 表单 元 素 完成 本 页 面 , 其 中 ,姓名 .Email 和 个 人 简介 是 年龄 [le 
必 填 内 容 ,年龄 必须 输入 0 一 100 的 整数 ,出 生日 期 必须 输 Email 
入 有 效 日 期 格式 ,Email 必须 输入 有 效 的 Email 格式 ,个 个 


人 了 


1. 项 目 说 明 


完成 一 个 订货 单个 人 信息 输入 页 面 。 主 要 输入 姓名 、 年 龄 .出 生日 期 `. Email、 个 人 主 
个 人 简介 等 信息 ,如 图 3. 2 所 示 。 使 用 HTML5 新 增 





姓名 陛 三 














出 生日 期 11998-01-01 












页 必须 输入 有 效 的 URL 格式 。 个 
2. 项 目 设计 














图 3.2 订货 单 页 面 
本 项 目 要 完成 一 个 表单 输入 页 面 以 及 实现 相应 的 输 


入 格式 验证 功能 。HTML5 新 增 的 表单 输入 类 型 和 属性 已 经 直接 支持 了 对 输入 内 容 格 式 
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的 判断 功能 。 在 本 项 目的 页 面 中 ,可 以 直接 使 用 这 些 新 增 的 表单 元 素 ,完成 订货 单 信息 的 
输入 。 

(1) 首先 ,在 HTML 页 面 的 主体 部 分 使 用 二 form 二 标签 定义 表单 元 素 。 

(2) 对 于 姓名 ,使 用 text 输入 类 型 (type= "text") , 它 是 必 填 信息 ,在 input 元 素 中 使 
用 required 属性 。 

(3) 对 于 年 龄 ,使 用 number 输入 类 型 (type 二 "number"), 它 需要 输入 1 一 100 的 整 
数 , 使 用 min 和 max 属性 限定 输入 的 整数 范围 。 

(4) 对 于 出 生日 期 ,使 用 date 输入 类 型 (type 二 "date")。 

(5) 对 于 Email, 使 用 email 输入 类 型 (type 二 "email"), 它 是 必 填 信息 ,在 input 元 素 
中 使 用 required 属性 。 

(6) 对 于 个 人 主页 ,使 用 url 输入 类 型 (type 二 "url")。 

(7) 对 于 个 人 简介 ,使 用 textarea, 它 是 必 填 信息 ,在 textarea 元 素 中 使 用 required 
属性 。 


3. 项 目 实施 
本 项 目 代 码 如 下 。 


<html> 
<head> 
<meta charset= "utf- 8"> 
</head> 
<body> 











< form name= "forml"> 
<label for= "username"> 姓 名 < /label> 
< inmput name= "username" id= "username" type= "text" required /><br/> 
<label for= "age"> 年 龄 < /label> 
<jnput name= "age" id= "age" type= "nunmber" min= "0" max= "100" /><br/> 
<label for= "birthday"> 出 生日 期 < /label> 
< input name= "birthday" id= "birthday" type= "date" /><br/> 
<label for="email"> Email< /label> 
< input name= "email" id= "email" type= "email" required /><br/> 
<label for= "url"> 个 人 主页 < /label> 
<input name= "url" id= "url" type= "url" /><br/> 
<label for= "memo"> 个 人 简介 < /label> 
< textarea name= "memo" id= "memo" required>< /textarea><br/> 
<input type= "submit"> 

</form> 

< /body> 
</html> 


将 以 上 HTML 文件 保存 为 “订货 单 页 面 . html” ,使 用 浏览 器 打开 ,输入 各 项 信息 , 当 
输入 格式 错误 时 ,例如 ,输入 错误 的 出 生日 期 格式 或 者 错误 的 Email 格式 ,观察 页 面 上 的 
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错误 提示 信息 。 
4 知识 运用 


制作 一 个 个 人 联系 信息 输入 页 面 , 其 中 包括 : 姓名 .电子 邮箱 、 站 点 .电话 、 收 入 范围 
(1000 一 10000) 等 信息 ,姓名 和 电话 为 必 填 信息 。 使 用 新 增 的 HTML5 表单 元 素 和 属性 
完成 此 页 面 。 


33 ”咖啡 商城 一 一 用 户 注 册 模 块 实现 


本 项 目 要 完成 的 功能 属于 课程 综合 项 目 中 的 首页 页 面 中 的 注册 用 户 功 能 模块 ,需要 
利用 本 章 学 习 的 HTML5 新 增 的 表单 输入 类 型 以 及 新 增 属性 完成 规定 的 输入 数据 格式 
限定 ,主要 包括 number、date、email 等 输入 类 型 的 使 用 和 非 空 输入 验证 。 

(1) 年 龄 使 用 number 输入 类 型 ,出 生日 期 使 用 date 输入 类 型 ,Email 使 用 email 输 
入 类 型 ,个 人 主页 使 用 url 输入 类 型 。 

(2) 必 填 项 使 用 required 属性 进行 限定 。 


3.3.1 项 目 说 明 


本 项 目 要 实现 网 站 的 用 户 注册 表单 功能 。 使 用 浏览 器 打开 “商城 首页 . html” 页 面 , 单 
击 右 上 角 的 “免费 注册 ” 超 链接 ,查看 弹出 的 用 户 注 册 窗 口 。 如 果 未 填写 用 户 名 就 提交 表 
单 ,会 提示 警告 信息 。 用 户 注册 页 面 如 图 3. 3 所 示 。 




















































































































































































































用 户 名 

密码 

密码 确认 | 

年 龄 

| 性 别 目 男 @ 女 

出 生日 期 | 年 /月 /日 

学 历 。 -请 选 坚 -- "| 

Email 

个 人 主页 

用 户头 像 | 选择 文件 未 选择 任何 文件 
Li 卉 | 








图 3.3 用 户 注册 页 面 


在 本 项 目 中 ,需要 完成 以 下 几 个 功能 。 

(1) 在 注册 表单 中 ,需要 用 户 输入 注册 信息 ,包括 : 用 户 名 、 密 码 、 密 码 确认 、 年 龄 .性 
别 . 出 生日 期 ,学历 .Email 个 人 主页 和 用 户头 像 。 

(2) 用 户 名 、 密 码 和 Email 是 必 填 项 。 
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3.3.2 项 目 设计 


在 本 项 目 中 需要 完成 的 功能 的 设计 思路 如 下 : 
(1) 在 注册 表单 中 使 用 以 下 表单 元 素 让 用 户 输入 注册 信息 。 





用 户 名 : < input name= "username" id= "username" type= "text" /> 
密码 : < input name= "pwd" id= "pwd" type= "password" /> 
密码 确认 : < input name= "pwd2" id= "pwd2" type= "passwork" required /> 
年 龄 : < input name= "age" id= "age" type= "number"min="0" max= "100" /> 
性 别 : <input type= "radio" name="sex"> 男 
<input type= "radio" name= "sex"> 女 

出 生日 期 : <input name= "birthday" id= "birthday" type= "date"/> 
学 历 : 
<select name= "degree" id= "degree"> 

<option value="0" selected>--- 请 选择 ---</option> 

<option value="l"> 初 中 < /option> 

<option value="2"> 高 中 < /option> 

<option value="3"> 大 学 < /option> 

<option value="4"> 研 究 生 < /option> 
</select> 
Email: <input name= "email" id= "email" type="email" /> 
个 人 主页 : <input name= "ur"] id=- "url" type= "url"/> 
用 户头 像 : <input type= "file" name= "pic" id= "pic"/> 


(2) 检查 用 户 名 密码 和 Email 是 否 已 填写 内 容 。 
通过 添加 required 属性 ,对 用 户 名 、 密 码 和 Email 做 必 填 验证 。 


用 户 名 : < input name= "username" id= "username" type= "text" required /> 
密码 : < input name= "pwd" id= "pwd" type= "password" required /> 
Email: < input name= "email" id= "email" type= "email" required /> 


3.3.3 项 目 实施 
本 项 目 代 码 如 下 。 


< !DOCTYPE HIML> 
<html> 
<head> 
<title> 用 户 注册 < /title> 
<meta charset= "utf- 8"> 
< /head> 
<body> 
< form name= "forml"> 
<table border="]1"> 


<tr> 
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<td><label for= "username"> 用 户 名 < /label>< /td> 


<td>< input name= "username" id= "username" type= "text" 


required/> 
</td> 
RS 
<tr> 


<td><label for= "pwd"> 密 码 </label>< /td> 
<td> < input name= "pwd" id= "pwd" type= "password" required /> 
</td> 
</tr> 
RE 
<td>< label for= "pwd2"> 密 码 确认 < /label>< /td> 
<td> < input name= "pwd2" id= "pwd2" type= "password" required /> 
</td> 
</tr> 
<tr> 
<td><1abel for= "age"> 年 龄 < /label>< /td> 
<td>< input name= "age" id= "age" type= "number" min= "0" 
max= "100" /> 
</td> 
</tr> 
<tr> 
<td><label for="sex"> 性 别 </label>< /td> 
<td>< input type= "radio" name= "sex"> 男 
< input type= "radion name= "sex"> 女 
</td> 
</tr> 
<tr> 
<td><label for= "birthday"> 出 生日 期 < /label>< /td> 
<td> < input name= "birthday" id= "birthday" type= "date" /> 
</td> 
< /tr> 
<tr> 
<td><label for="degree"> 学 历 < /label>< /td> 
<td> 
< select name= "degree" id= "degree"> 
<option value= "0" selected>--- 请 选择 ---</option> 
<option value= "1"> 初 中 < /option> 
<option value= "2"> 高 中 < /option> 
<option value= "3"> 大 学 < /option> 
<option value= "4"> 研 究 生 < /option> 
</select> 
</td> 
< /tr> 
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RE 
<td><label for="email">Email< /label></td> 
<td><input name= "email" id- "email" type= "email" required/> 
</td> 

</tr> 

Ctr 
<td><label for= "url"> 个 人 主页 </label></td> 
<td>< input name= "url" id= "url" type= "url" /> 
</td> 

</tr> 

<tr> 
<td><label for= "pic"> 用 户头 像 < /label>< /td> 
<td>< input type= "file" name= "pic" id="pic"> 
</td> 

</tr> 

<tr align= "center"> 
<td colspan= "2">< input type= "submit" class= "button" 

value= "注册 "> < /td> 

</tr> 

</table> 
</form> 
</body> 
</html> 


习 题 


1. HTML5 之 前 的 HTML 版 本 是 ( 
A. HTML4.01 B. HTML4 C. HTML4.1 D. HTML4.9 
2. HTML5 的 正确 DOCTYPE 是 ( 
A IDOCTYPE HTML PUBLIC> 
=IDOCTYPE html> 
C: <IDOCTYPE HTMLS5> 
D. <IDOCTYPE HTML PUBLIC "-//W3C//DTD HTMLS: 0//EN" 
"http://www. w3. org/ TR/html5/ strict. dtd"> 
3. 在 HTML5 中 ,(  ”) 元 素 用 于 组 合 标题 元 素 。 


5 


A. =group> B. =header> C. =headings> D. =hgroup> 
4. 在 HTML5 中 ,( ”) 元 素 用 于 表示 文档 中 的 节 。 

A. =~article> B. =header> C. =section> D. =~aside> 
5. 在 HTML5 中 ,(  ”) 元 素 用 于 表示 文档 中 的 导航 链接 。 

A. =article> B. =hgroup> C. =aside> D. <nav> 


6. HTML5 中 不 再 支持 ( pe 
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A 和 > B. =ins> C. <menu> D. <font> 
7. HTML5 中 不 再 支持 ( ) 元 素 。 
A. =cite> B. =acronym> C. =abbr> D. =base> 
8. 在 HTML5 中 ,onblur 和 onfocus 是 ( Ns 
A. HTML 元 素 ” B. 样式 属性 C. 事件 属性 D. 不 存在 此 属性 








9. 新 的 HTML5 全 局 属性 ,contenteditable 用 于 ( 和 
A. 规定 元 素 的 上 下 文 菜单 ,该 菜单 会 在 用 户 右 击 元 素 时 出 现 
B. 规定 元 素 内 容 是 否 是 可 编辑 的 
C. 从 服务 器 升级 内 容 
D. 返回 内 容 在 字符 串 中 首次 出 现 的 位 置 





0. 在 HTML5 中 ,(  ”) 属 性 用 于 规定 输入 字段 是 必 填 的 。 
A. required B. formvalidate C. validate D. placeholder 
1. 输入 类 型 ( 。 ”) 用 于 定义 滑 块 控件 。 
A. search B. controls C. slider D. range 
2. 输入 类 型 ( ) 用 于 定义 周 和 年 控件 (无 时 区 ) 。 
A. date B. week C. year D. month 
3. URL 是 HTML5 表单 新 增 的 ( )。 
A. 输入 类 型 B. 元 素 C. 属性 D. 约束 
4. 在 HTML5 中 ,(  ”) 属 性 规定 用 于 验证 input 域 的 模式 。 
A. required B. formvalidate C. validate D. pattern 
5. 在 HTML5 中 ,( ) 属 性 规定 输入 域 中 可 选择 多 个 值 。 
A. required B. multiple C. autofocus D. autocomplete 


第 筷 营 
CSS 基础 
本 章 概 述 


通过 本 章 的 学 习 ,学 生 能 够 了 解 如 何 使 用 CSS 控制 显示 样式 ,制作 不 同 的 效果 。 学 
习 CSS 各 类 选择 符 , 设 置 文本 和 字体 相关 属性 ,并 且 学 习 对 背景 和 边框 相关 样式 的 控制 ， 
从 而 实现 对 网 页 页 面 布局 .字体 、 颜 色 、 背 景 及 图 文 效果 的 精准 控制 。 

学 习 重 点 与 难点 

重点 : 

(1) CSS 基本 语法 及 样式 规则 。 

(2) 选择 符 原 理 及 定义 方式 。 

(3) 文本 和 字体 相关 属性 对 网 页 的 美化 方法 。 

(4) 背景 和 边框 相关 样式 。 

(5) CSS 样式 中 常用 的 属性 设置 。 

难点 : 

(1) CSS 的 位 置 分 类 。 

(2) CSS 伪 类 。 

重点 及 难点 学 习 指导 建议 : 

。 重点 在 于 掌握 CSS 选择 符 的 使 用 ,可 以 在 学 习 和 使 用 中 逐渐 扩展 对 CSS3 新 增 选 

择 符 的 认识 。 
。 字体 和 文本 、 背 景 ,边框 边 距 等 常用 属性 必须 记忆 ,通过 大 量 编码 练习 强化 记忆 。 
。 使 用 CSS 伪 类 知识 可 以 制作 出 丰富 多 彩 的 显示 效果 ,学 生 需要 在 平时 多 积累 。 


第 (4 齐 ”css 基础 


41 CSS 基本 语法 


CSS(Cascading Style Sheets) 的 中 文 意思 是 层 秋 样式 表 或 级 联 样式 表 , 它 的 作用 是 
控制 页 面 里 每 一 个 元 素 的 表现 形式 ,如 字体 样式 背景、 排列 方式 .区 域 尺寸 ,. 边 框 等 。 

使 用 CSS 具有 以 下 3 个 优势 。 

(1) CSS 将 Web 前 端 代 码 与 HTML 页 面 中 负责 布局 美化 及 一 些 特殊 效果 的 代码 
分 隔 开 。 

第 2 章 学 习 了 HTML 基础 知识 ,HTML 标签 的 主要 作用 是 定义 网 页 的 内 容 , 而 本 章 
学 习 的 CSS 则 侧重 于 网 页 的 内 容 如 何 显示 。 

(2) 实现 了 样式 重复 使 用 。 

样式 重复 使 用 可 以 简化 和 格式 化 代码 ,提高 开发 人 员 书 写 或 维护 时 的 工作 效率 ,并 且 
在 修改 网 页 样式 时 也 会 更 加 容易 。 如 果 需 要 更 改 网 页 的 样式 ,只 对 相应 的 CSS 进行 修改 
即 可 。 

(3) 有 利于 搜索 引擎 的 搜索 。 

目前 越 来 越 多 的 用 户 在 使 用 网 站 时 并 不 会 直接 输入 网 站 地 址 ,而 是 使 用 搜索 引擎 搜 
索 , 这 就 要 求 在 Web 开发 时 不 仅 要 对 用 户 友好 ,也 要 对 搜索 引擎 友好 。 使 用 CSS 样式 可 
以 简化 原 网 页 的 代码 量 , 使 得 网 页 结构 和 内 容 更 适合 于 搜索 引擎 搜索 。 








4.1.1 CSS 语句 格式 


CSS 样式 可 以 直接 存储 于 HTML 页 面 中 ,也 可 以 保存 在 单独 的 样式 文件 中 ,并 在 
HTML 页 面 中 引用 。CSS 样式 设置 方式 可 归纳 为 以 下 3 种 方式 。 

。 内 联 样式 : 也 叫 行内 样式 , 它 的 样式 属性 内 容 直 接 跟 在 将 要 修饰 的 文字 的 标 

签 里 。 

。 嵌入 样式 : 样式 的 属性 内 容 以 代码 的 形式 写 在 网 页 中 ,一 个 样式 可 以 在 一 个 页 面 
多 次 应 用 。 
外 部 样式 : 样式 的 属性 通过 与 外 部 单独 存放 的 CSS 文件 连接 ,此 时 的 CSS 样式 是 
一 个 独立 的 文件 ,在 网 页 中 通过 代码 将 该 文件 引入 。 
CSS3 种 样式 对 比 见 表 4. 1。 

表 4.1 CSS3 种 样式 对 比 


设置 方式 举 例 特 点 





=body> 

二 hl style 二 "font-family: 宋 体 ;font-size:12pt;color:blue" 二 这 
里 使 用 了 Hl 标签 /hl 二 

</body> 


内 联 样 式 灵活 、 简 单方 便 
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续 表 

设置 方式 举 例 特 点 
<head> 
style type= "text/css"> 
hl {font-family: 宋 体 ;font-size:12pt;color:blue} 
</style> 一 个 样式 可 以 在 一 个 

A es 页 面 多 次 应 用 
=<body> 
雪 hl 之 这 里 使 用 了 HIl 标签 二 /hl 之 
=</body> 
<head> 
=link rel= "stylesheet" href="hl]. css" type= "text/css"> 需要 有 一 个 外 部 的 样 
3 人 

外 部 样式 = 局 ， 
<<body> 二 hl 之 这 里 使 用 了 H1 标签 二 /hl 之 一 /body> 既 减 少 代码 ,又 可 以 做 
hl. css 文件 到 统一 页 面 风格 
hl {font-family: 宋 体 ;font-size:12pt;color:blue) 
由 表 4. 1 可 以 发 现 ,CSS 语句 由 3 部 分 构成 : 选择 符 、 属 性 和 值 。 其 中 选择 符 的 作用 
是 限制 样式 的 作用 范围 。 语 句 格 式 如 下 。 
选择 符 {属性 : 值 } 


例如 : p {font-size:14px} ,选择 符 是 p, 属 性 是 font-size, 值 是 14px, 语 句 的 作用 是 将 
段落 文本 的 字号 设置 为 14 像素 。 

如 果 需 要 对 一 个 选择 符 指定 多 个 属性 , 则 需要 使 用 分 号 隔 开 。 

例如 : 


p {font- size:l4px; color:red} 


另外 , 当 属 性 的 值 是 多 个 单词 组 成 时 ,必须 在 值 上 加 引号 。 
例如 : 


hl {font- family: "Courier New"} 
4.1.2 CSS 选择 符 


CSS 选择 符 主 要 包括 HTML 选择 符 class 选择 符 和 id 选择 符 。 下 面 分 别 讨论 各 个 
选择 符 的 使 用 方式 。 


1. HTML 选择 符 


HTML 选择 符 是 以 HTML 标签 作为 选择 符 .其 作用 域 为 所 有 符合 条 件 的 HTML 
标签 。 
例如 : 


hl {text- align: center; color: blue} 
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p {font- size:15;color:red} 


2. class 选择 符 


class 选择 符 是 使 用 HTML 标签 的 class 属性 值 作为 选择 符 。 定 义 class 选择 符 时 ， 
前 面 需 要 加 “. ”标志 。 

class 选择 符 可 以 实现 以 下 两 种 效果 。 

(1) 可 以 为 相同 的 元 素 定义 不 同 的 样式 。 

(2) 可 以 为 不 同 的 元 素 定义 相同 的 样式 。 

下 面 分 别 介绍 这 两 种 情况 。 

(1) 在 CSS 中 ,可 以 为 相同 的 HTML 元 素 定 义 不 同 的 样式 。 

例如 ,首先 设置 样式 如 下 。 

.warning{ font- size:20px } 


.danger{ font- size:30px } 
.normal{ font- size:40px } 


HTML 页 面 body 中 的 代码 如 下 。 


<p class= "warning"> 这 是 warning 的 样式 < /p> 
<p class= "danger"> 这 是 danger 的 样式 < /p> 
<p class= "normal"> 这 是 normal 的 样式 < /p> 


其 显示 结果 如 图 4.1 所 示 。 
(2) 对 于 不 同 的 HTML 元 素来 说 ,也 可 以 为 它们 定义 相同 的 样式 。 
例如 ,首先 设置 样式 如 下 。 








.title {text-align:center;color: blue} 
HTML 页 面 body 中 代码 如 下 。 


<p class= "title"> 蓝 色 的 段落 < /p> 
<hl class= "title"> 蓝 色 的 标题 < /hl> 


其 显示 结果 如 图 4. 2 所 示 。 


这 是 warning 的 样式 
这 是 danger 的 样式 
蓝 色 的 段落 
SE 轩 
这 是 normal 的 样式 蓝 色 的 标题 
图 4.1 为 相同 的 元 素 定义 不 同 的 样式 图 4.2 为 不 同 的 元 素 定义 相同 的 样式 








对 于 上 例 来 说 ,不 同 元 素 在 使 用 了 class= "title" 的 CSS 样式 后 ,它们 的 样式 都 显示 
为 蓝 色 居中 。 


HiMLS+cS§S3+Javaseript 丽 同 钱 虎 


3.id 选 择 符 


id 选择 符 使 用 HTML 标签 的 id 属性 值 作为 选择 符 。id 属性 用 来 定义 某 一 特定 的 
HTML 标签 ,在 id 选择 符 前 面 需要 加 “并 ” 标 志 。 

例如 ,下 面 的 两 个 id 选择 器 ,第 一 个 定义 元 素 的 颜色 为 红色 ,第 二 个 定义 元 素 的 颜色 
为 绿色 。 

#red {color:red;} 


#green {color:green;} 
HTML 页 面 body 中 的 代码 如 下 。 


<p id= "red"> 这 个 段落 是 红色 。< /p> 

<p id= "green"> 这 个 段落 是 绿色 。< /p> 

id 选择 符 一 般 用 于 修饰 对 应 id 标识 的 HTML 元 素 , 理 论 上 ,在 一 个 网 页 文件 中 的 id 
属性 值 不 应 该 相同 。id 属性 在 后 面 要 学 习 的 JavaScript 部 分 会 得 到 广泛 的 应 用 。 

有 时 需要 指明 选择 器 所 属 的 元 素 。 例 如 : 

#sidebar { 


border: 1px dotted #000; 
padding: 10px; 





} 


根据 这 条 规则 ,id 为 sidebar 的 元 素 将 拥有 一 个 像素 宽 的 黑色 点 状 边框 ,同时 其 周围 
会 有 10 个 像素 宽 的 内 边 距 (padding, 内 部 空白 )。 老 版 本 的 下 浏览 器 可 能 会 忽略 这 条 
规则 ,除非 特别 定义 这 个 选择 器 所 属 的 元 素 。 
div#sidebar { 
border: lpx dotted #000; 
padding: 10px; 
. 
class 选择 符 与 id 选择 符 的 区 别 如 下 。 
区 别 1: 一 个 id 只 能 在 文档 中 使 用 一 次 ,而 class 可 以 重复 使 用 。 
区 别 2: 不 能 使 用 id 词 列表 。id 选择 符 不 能 结合 使 用 ,因为 id 属性 不 允许 有 以 空格 
分 隔 的 词 列 表 。 而 class 选择 符 可 以 结合 使 用 ,一 个 HTML 元 素 可 以 同时 具有 多 个 class 
属性 值 ,例如 : 


<div class= "box none top">< /div> 


这 个 div 元 素 有 3 个 class 值 ,class 选择 符 . box、. none 和 . top 可 以 同时 作用 于 它 。 

注意 ,class 选择 符 和 id 选择 符 可 能 是 区 分 大 小 写 的 ,这 取决 于 文档 的 语言 。HTML 
和 XHTML 将 class 和 id 值 定义 为 区 分 大 小 写 ,所 以 class 和 id 值 的 大 小 写 必须 与 文档 
中 的 相应 值 匹配 。 

因此 ,对 于 以 下 的 CSS 和 HTML ,元 素 不 会 变 成 粗 体 。 
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区 网 图 “< 本 二 而 


#intro {font— weight:bold;} 
<p id- "Intro"> This is a paragraph of introduction.< /p> 


于 字母 i 的 大 小 写 不 同 ,所 以 选择 器 不 会 匹配 上 面 的 元 素 。 
4. 其 他 选择 符 


) 包含 选择 符 
包含 选择 符 是 指 用 空格 隔 开 的 两 个 或 多 个 单一 选择 符 组 成 的 字符 串 。 例 如 : 


div p{color:red;font- size:12;} 


主要 用 来 对 某 些 具有 包含 关系 的 元 素 单 独 定义 样式 ,如 元 素 1 里 包含 元 素 2。 使 用 
包含 选择 符 定义 的 样式 就 只 能 对 在 元 素 1 里 的 元 素 2 起 作用 ,而 对 单独 的 元 素 1 和 元 素 
2 不 起 作用 。 

例如 : 


<html> 

<head> 
<style type= "text/css"> 
tableaf{ 


color: green; 




















font- size: 36px; 
text- decoration : none; 
y 
</style> 
< /head> 
<body> 
<a href= "http://www.nou.com.cn"> 欢 度 国庆 节 < /a> 
<table border=1> 
<tr> 
<td><a href= "http://www.nou.com.cn"> 欢 度 国庆 节 < /a>< /td> 
</tr> 
</table> 
< /body> 
</htm> 


这 里 定义 了 元 素 table 中 包含 的 元 素 a 的 字体 为 绿 EE 
色 无 下 面 线 样式 ,这 种 定义 对 单独 的 元 素 table 和 a 不 起 欢度 国庆 贡 
作用 ,而 对 元 素 table 中 包含 的 a 才 会 起 作用 。 图 4.3 包含 选择 符 显示 效果 

在 IE11 中 其 浏览 效果 如 图 4. 3 所 示 。 

包含 选择 符 的 优先 级 要 比 单一 选择 符 定义 的 样式 规则 的 优先 级 高 。 如 果 定 义 了 


























table a {color: green;font- size: 36px;text— decoration : none;} 


同时 也 定义 了 


HTMLS+cSSse+Javaseript 顺 旧 是 羽 


a{color:yellow;} 


那么 其 显示 结果 为 表格 中 的 超 链接 文本 是 绿色 、 字 号 是 36 像素 。 

2) 组 合 选 择 符 

为 了 减少 样式 表 的 重复 声明 ,可 以 在 一 条 样式 规则 定义 语句 中 组 合 若干 个 选择 符 ,每 
个 选择 符 之 间 用 逗号 隔 开 。 

例如 : 


<html> 

<head> 
<style type= "text/css"> 

hl,h2,h3{color:#CC66FF;} 

</style> 

< /head> 

<body> 
<hl> 这 里 使 hl 标签 < /hl> 
<h2> 这 里 使 hb2 标签 < /h2> 
<h3> 这 里 使 b3 标 签 < /h3> 

</body> 

</htm> 


使 用 组 合 选择 符 既 减 少 了 代码 量 , 也 更 便于 阅读 修改 。 

3) 伪 元 素 选 择 符 

伪 元 素 选择 符 是 指 同一 个 HTML 元 素 的 各 种 状态 和 部 分 内 容 的 一 种 定义 方式 。 

例如 , 超 链 接 元 素 a 的 4 种 伪 类 分 别 是 : 

a:link 表示 超 链 接 标 签 ( 二 a 二 ) 的 正常 状态 (没有 做 任何 动作 前 )。 

a:visited 表示 访问 过 的 超 链接 的 状态 。 

a:hover 表示 鼠标 移动 到 超 链接 上 的 状态 。hover 的 中 文 意思 为 “停留 . 悬 停 ”, 意 思 
是 当 鼠 标 指向 一 个 元 素 时 .元素 改变 其 浑 染 效果 , 当 鼠 标 离开 元 素 时 ,回复 元 素 原 有 的 样 
式 显示 。 

asactive 表示 超 链 接 选中 的 状态 。 

一 般 它们 的 声明 按 :link :visited、:hover :active 顺序 进行 。 

其 他 元 素 也 可 以 使 用 这 些 伪 元 素 选 择 符 , 例 如: 


p:hover{ 
Color:green; 
background:yellow; 
font- size:large; 


} 
还 有 ,段落 的 首 字母 和 首 行 都 可 以 用 伪 元 素 选 择 符 定义 样式 。 例 如 : 
p:first- letter{font- size:20px;font— weight:bold} 


p:first- line{line- height:20px;text— indent:2em} 


年 心目 








最 后 ,对 各 种 选择 符 的 优先 级 进行 说 明 。 

如 果 对 一 个 元 素 定义 了 多 个 样式 ,那么 它们 之 间 的 优先 级 决定 了 元 素 最 终 会 如 何 显 
对 于 优先 级 ,一 般 有 如 下 规定 。 

。 id 选择 符 二 class 选择 符 之 HTML 标签 选择 符 。 

。 内 联 样式 表 之 嵌入 样式 表 之 外 部 样式 表 。 

例如 ,思考 下 列 代码 最 终 的 显示 字体 的 颜色 及 大 小 。 


<html> 
<head> 
<style type= "text/css"> 
#title { 
color: blue; 
font- size: 30; 
} 
-head { 
color: red; 
font- size: 20; 
3 
div{ 
color: green; 
font- size: 10; 
3 
</style> 
< /head> 
<body> 
<div id= "title" class= "head"> 猜 猜 是 什么 样式 在 起 作用 < /div> 
< /body> 
</html> 


运行 上 例 ,id 选择 符 起 作用 ,最 终 显 示 为 蓝 色 字体 、30 号 字 。 


<html> 
<head> 

<style type= "text/css"> 

P {text-align:right} 

</style> 
</head> 
<body> 

<p style= "text- align:center"> 中 国 </p> 
< /body> 
</htm> 


运行 上 例 , 内 联 样式 起 作用 ,文字 居中 显示 。 
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4.1.3 项 目 : 世界 杯 胜 负 榜 
1. 项 目 说 明 
制作 如 图 4.4 所 示 的 世界 杯 胜 负 榜 的 表格 ,以 指定 的 字号 和 不 同 颜色 对 得 分 加 以 


国家 | 胜 平 
0 
0 














西班牙 
倚 兰 


图 4.4 世界 杯 胜 负 榜 








-一 | 天 一 民 


















































本 项 目 要 求 设置 字体 和 颜色 的 样式 , 表 头 的 文本 设置 为 红色 .字号 设置 为 50 像素 , 单 
元 格 中 文字 字号 设置 为 50 像素 ,其 中 胜利 场次 显示 为 黄色 ,平局 场次 显示 为 灰色 ,失败 场 
次 显示 为 绿色 。 


2. 项 目 设计 


(1) 要 定义 文字 的 样式 ,需要 使 用 CSS。CSS 的 定义 包括 外 部 样式 .嵌入 样式 内 联 
样式 ,该 项 目 中 采用 典 入 样式 。 

(2) 使 用 组 合 选择 符 table ,th ,td 选中 表 和 所 有 单元 格 , 从 而 定义 整体 的 边框 和 字号 
属性 。 

(3) 为 table 添加 class 二 "medal" ,从 而 与 其 他 表格 区 分 ,在 复杂 网 页 的 布局 中 这 种 
区 分 非常 必要 。 

(4) 要 为 表 头 单元 格 添加 字体 颜色 ,可 以 使 用 包含 选择 符 . medal th 选中 表 头 单 
元 格 。 

(5) 要 为 二 td> 单 元 格 添加 不 同 的 字体 颜色 ,需要 用 不 同 的 class 属性 值 对 所 有 单元 
格 加 以 区 分 ,然后 使 用 class 选择 符 分 别 选取 对 应 的 单元 格 。 


3. 项 目 实施 
本 项 目 代码 如 下 。 


<html> 
<head> 
<meta charset= "utf- 8"> 


<title> 世 界 杯 胜 负 榜 < /title> 


捕 同 鲜 css 图 二 


<style> 

table, th, td { 
border: lpx solid black; 
font— size:50px; 

. 

medal th { 
color: red; 

3 

.sheng { 
color: yellow; 

} 

:ping { 
Color: gray7 


.fuf 
color: green; 
3 
</style> 
< /head> 
<body> 
<table class= "medal"> 
<tr> 
<th> 国 家 < /th> 
<th> 胜 < /th> 
<th> 平 </th> 
<th> 负 < /th> 
</tr> 
<tr> 
<td> 西 班 牙 < /td> 
<td class="sheng"> 6< /td> 
<td class= "ping"> 0< /td> 
<td class= "fu"> 1< /td> 
</tr> 
ty 
<td> 荷 兰 < /td> 


<td class= "sheng"> 6< /td> 
<td class= "ping"> 0< /td> 
<td class= "fu"> 1]< /td> 
< /tr> 
</table> 
< /body> 
</htm> 


4. 知识 运用 





前 面 章 节 使 用 表单 元 素 制 作 了 信息 统计 表 , 下 面 利用 本 节 所 学 的 CSS 对 其 进行 美 
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化 ,要 求 将 表 头 设置 为 红色 背景 , 表 头 字 的 颜色 为 淡 蓝 色 ,表格 内 的 颜色 为 浅 灰 色 ,效果 如 
图 4.5 所 示 。 














图 4.5 美化 信息 统计 表 


42 文本 和 字体 相关 属性 


对 于 一 个 网 页 来 说 ,主要 使 用 文字 和 图 片 表达 自己 的 观点 。 一 个 简洁 清晰 的 网 页 设 
计 会 使 用 户 有 更 好 的 体验 。 而 文字 是 传递 信息 的 主要 手段 ,所 以 字体 和 文本 的 设置 十 分 
重要 。 本 节 主 要 讲解 文本 和 字体 的 相关 属性 。 


4.2.1 字体 属性 
字体 属性 主要 用 于 设置 字体 的 外 观 , 包 括 字 体 字号、 风格 ,粗细 等 。 
1. 指定 字体 


指定 字体 (fontrfamily) 属 性 可 以 实现 文本 的 字体 选择 ,如 宋体 .黑体 .隶书 等 。 需 要 
注意 的 是 ,如 果 字 体 名 字 中 包含 空格 “# ”或 “$” 之 类 的 符号 , 则 需要 在 声明 中 加 引号 ,其 
语法 示例 如 下 : 





p {font- family:"Times New Roman", Times, serif} 


显示 字体 时 ,如 果 指 定 一 种 特殊 字体 类 型 ,而 在 浏览 器 或 者 操作 系统 中 该 类 型 不 能 正 
确 获 取 , 则 可 以 使 用 font-family 预 设 多 种 字体 类 型 ,每 种 字体 类 型 之 间 使 用 逗号 隔 开 ,如 
果 前 面 的 字体 类 型 不 能 正确 显示 , 则 系统 将 自动 选择 后 一 种 字体 类 型 ,所 以 在 页 面 设计 时 
要 考虑 不 能 正确 显示 的 问题 ,最 好 以 最 基本 的 字体 类 型 作为 最 后 一 个 选择 ,如 使 用 宋体 。 


2. 字体 大 小 
字体 大 小 (font-size) 属 性 可 以 设置 文本 的 字体 大 小 ,例如 : 
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p {font- size:14px;} 


这 里 设置 字体 大 小 为 14 像素 。 浏 览 器 的 默认 字体 大 小 是 16px, 而 中 文 常用 的 字体 
大 小 是 12px。 像 文章 的 标题 等 应 该 显示 大 字体 ,但 此 时 不 应 使 用 字体 大 小 属性 ,应 使 用 
hl、h2 等 HTML 标签 。 

一 般 使 用 px 作为 字体 大 小 的 单位 ,设置 时 也 可 以 使 用 em 单位 蔡 代 px。em 是 相对 
大 小 ,这 里 的 相对 指 的 是 相对 于 元 素 父 元 素 的 font-size。 例 如 ,如 果 在 一 个 二 div 二 设置 
字体 大 小 为 *16px”, 此 时 这 个 二 div 二 的 后 代 元 素 将 继承 它 的 字体 大 小 ,除非 重新 在 其 后 
代 元 素 中 进行 显 式 的 设置 。 此 时 如 果 将 其 子 元 素 的 字体 大 小 设置 为 “0. 75em”, 那 么 其 字 
体 大 小 计算 出 来 后 就 相当 于 “0.75X16px 一 12px”。 

font-size 属性 的 合法 取 值 见 表 4. 2。 


表 4.2 font-size 属性 的 合法 取 值 


























值 描 述 
xx-small 
x-small 
| 把 字体 的 尺寸 设 置 为 不 同 的 尺寸 ,从 xxcsmall 到 xoclarge。 
I 默认 值 为 medium 
large 
x-large 
xx-large 
smaller 把 font-size 设置 为 比 父 元 素 更 小 的 尺寸 
larger 把 font-size 设置 为 比 父 元 素 更 大 的 尺寸 
length 把 font-size 设置 为 一 个 固定 的 值 
% 把 font-size 设置 为 基于 父 元 素 的 一 个 百分比 值 
inherit 规定 应 该 从 父 元 素 继承 字体 尺寸 
3. 字体 风格 


字体 风格 (font-style) 即 字体 的 显示 样式 ,主要 的 属性 有 normal,italic、oblique 等 ,其 
含义 见 表 4.3。 其 语句 格式 如 下 。 


P.normal {font- style:normal;} 
p.italic {font- style:italic;} 
p.oblique {font- style:oblique;} 


表 4.3 font-style 属性 的 值 
值 描 述 值 描 述 





normal | 默认 值 。 浏 览 器 显示 一 个 标准 的 字体 样式 |oblique | 浏览 器 会 显示 一 个 倾斜 的 字体 样式 





italic “| 浏览 器 会 显示 一 个 斜体 的 字体 样式 inherit | 规定 应 该 从 父 元 素 继承 字体 样式 
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4. 字体 加 和 粗 


可 以 通过 设置 字体 的 粗细 ,从 而 使 文字 显示 出 不 同 的 外 观 。CSS 中 字体 加 粗 (font- 
weight) 属 性 的 主要 取 值 有 bold、normal,lighter 等 ,具体 参见 表 4. 4。 或 者 可 以 通过 设置 
数字 值 的 方式 进行 设置 ,数字 值 的 范围 为 100 一 900 , 值 越 大 ,加 粗 的 程度 越 强 。 

其 语句 格式 如 下 。 

-normal {font- weight:normal;} 

.thick {font— weight:bold;} 

.thicker {font- weight:900;} 





表 4.4 font-weight 属性 的 值 























| 
normal 默认 值 。 定 义 标准 的 字符 
bold 定义 粗 体 字符 
bolder 定义 更 粗 的 字符 
lighter 定义 更 细 的 字符 
100 
200 
300 
400 
500 定义 由 粗 到 细 的 字符 。400 等 同 于 normal,700 等 同 于 bold 
600 
700 
800 
900 
inherit 规定 应 该 从 父 元 素 继承 字体 的 粗细 
5. 其 他 字体 属性 


除了 上 述 字体 属性 外 ,还 有 一 些 常 用 的 属性 ,如 可 以 使 用 font-variant 属性 设置 小 型 
大 写字 母 的 字体 ;使 用 color 属性 定义 字体 颜色 等 。 
常用 的 字体 属性 总 结 见 表 4. 5。 


表 4.5 常用 的 字体 属性 总 结 











属 性 描 述 
font-family 设置 字体 系列 
font-size 设置 字体 大 小 
font-style 设置 字体 风格 
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续 表 
属 性 描 述 
font-variant 以 小 型 大 写字 体 或 者 正常 字体 显示 文本 
font-weight 设置 字体 粗细 
color 定义 颜色 





另外 ,font 是 所 有 字体 属性 的 简写 ,可 以 在 一 个 声明 中 设置 所 有 字体 属性 。 其 属性 排 
列 顺序 是 font-style、font-variant、font-weight、font-size 和 font-family。 其 中 ,font-style、 
font-variant ,font-weight 这 3 个 属性 值 可 以 自由 调换 ,而 font-size 和 font-family 属性 必 
须 按照 固定 顺序 出 现 , 而 且 还 必须 都 出 现在 font 属性 中 ,如 果 font-size 和 font-family 属 
性 顺序 不 对 或 者 缺少 一 个 , 则 整个 样式 规则 可 能 会 被 忽略 。font 属性 的 语句 格式 如 下 。 


{ font: normal 15px 宋体 ; } 








4.2.2 文本 属性 


在 文本 控制 和 显示 方面 ,CSS 定义 了 许多 属性 。 文 本 属性 主要 用 来 对 网 页 的 文字 进 
行 控制 ,如 控制 文字 的 缩 进 、 行 高 .字母 间隔 和 对 齐 方式 等 。 设 置 不 同 的 文本 属性 ,不 仅 方 
便 用 户 使 用 ,同时 也 更 加 适应 复杂 的 文本 呈现 。 

下 面 介绍 几 个 典型 的 CSS 文本 属性 。 

1. 缩 进 文本 

缩 进 文本 (textrindent) 属 性 可 以 方便 地 实现 文本 缩 进 , 它 的 初始 值 为 0, 其 语法 说 明 
如 下 。 

p {text- indent: 2em; }< !- -段落 的 首 行 缩 进 2 字符 --> 

2. 对 齐 方 式 

对 齐 方 式 (text-align) 属 性 用 于 实现 一 个 元 素 中 的 文本 行 相互 之 间 的 对 齐 方 式 , 分 为 
左 对 齐 、 居 中 、 右 对 齐 和 两 端 对 齐 , 其 语法 举例 如 下 。 

p { text-align:center;}<!-- 所 有 段落 的 内 部 内 容 居中 对 齐 -> 

3. 字母 间隔 

字母 间隔 (letterspacing) 属 性 用 于 控制 字符 或 字母 之 间 的 间隔 ,默认 值 为 0, 值 可 以 为 
负数 。 取 正 数 时 ,字母 间 的 间隔 会 增加 ; 取 负 数 时 ,字母 间 的 间隔 会 减少 。 其 语法 举例 如 下 。 

p { letter- spacing: 20px;]}<!-- 所 有 有 段落 内 部 字符 之 间 间 隔 20 像 素 --> 

4. 文 本 阴影 


在 CSS 中 ,可 以 给 文字 添加 阴影 效果 ,即使 用 text-shadow 命令 ,其 基本 语法 如 下 
所 示 。 
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<style type= "text/css"> 
p{ 
text- shadow: 3px 3px 2px #333; 
} 
</style> 


textshadow 属性 的 第 一 个 值 表示 水 平 位 移 ( 正 值 表示 偏 厂 , 负 gag 
值 表示 偏 左 ) ,第 二 个 值 表示 垂直 位 移 ,第 三 个 值 是 可 选 值 ,表示 模 ” 
糊 半径 ;第 四 个 值 表 示 阴影 颜色 ,如 上 面 语法 的 #333。 其 显示 结果 ”图 4.6 文本 阴影 
如 图 4.6 所 示 。 
CSS 中 提供 了 各 种 各 样 的 文本 属性 。 常 用 的 文本 属性 见 表 4. 6。 
表 4.6 常用 的 文本 属性 



































属 性 描 述 
color 设置 文本 颜色 
direction 设置 文本 方向 
line-height 设置 行 高 
letter-spacing 设置 字母 间隔 
text-align 设置 对 齐 方式 
text-decoration 向 文本 添加 修饰 ,如 下 画 线 
text-indent 缩 进 文本 
text-transform 控制 文本 的 大 小 写 
text-shadow 给 页 面 上 的 文字 添加 阴影 效果 
text-overflow 规定 当 文 本 溢出 包含 元 素 时 发 生 的 事情 
word-wrap 允许 对 长 的 不 可 分 割 的 单词 进行 分 割 , 并 换行 到 下 一 行 





4.2.3 项 目 : 介绍 我 的 学 校 2 
1. 项 目 说 明 


为 第 2 章 完成 的 案例 “2. 2. 2 介绍 我 的 学 校 1 设置 CSS 样式 ,效果 如 图 4.7 所 示 。 
本 项 目 中 ,要 求 一 级 标题 设置 为 30 像素 ,字体 为 “华文 隶书 ”, 居 中 ;二 级 标题 颜色 为 
灰 黑色 ,大 小 为 16 像素 ,字体 为 “微软 雅 黑 ”"。 正 文 段落 首 行 缩 进 2 字符 .1. 5 倍 行距 。 超 


链接 去 掉 下 夯 线 ,字体 颜色 为 绿色 ,字体 为 “微软 雅 黑 ”。 校 训 的 内 容 显示 为 红色 ,斜体 , 隶 
书 , 字 号 为 20 像素 。 
2. 项 目 设计 


使 用 CSS 设置 文字 段落 样式 ,其 中 字体 属性 为 font-family, 字 号 属性 为 font-size, 文 
字 颜 色 属 性 为 color; 段 落 缩 进 属性 为 text-indent. 行 距 属性 为 line-height, 文 字 下 夯 线 的 
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学 核 从 攻 于 和 而 的 恒 次 城市 大 连 ， 地 处 大 证 软件 园 核心 区 域 ， 占 地 面积 60 3 万: 






有 在 以 生 14000 余 人 *。 学 校 现 设 有 15 个 教学 机 构 ， 学 科 专业 禄 普 工学 
招生 。 


管理 学 、 艺术 
大 学 精神 


个 学 科 门 类 ， 共 设置 了 28 个 本 科 专 业 ， 面 向 29 个 





和 苞 殖 "学 以 至 用 各 在 个 导 将 学 与 用 紧密 呐 系 起 来 ， 学 用 结 “| 

















图 4.7 介绍 我 的 学 校 2 
属性 为 textrdecoration ,文字 倾斜 的 属性 为 font-style。 
3. 项 目 实施 


<html> 
<head> 
<title> 介 绍 我 的 学 校 < /title> 
<meta charset= "utf- 8"> 
<style> 
hl{font- size:20px;font- family: 华 文 细 黑 ;} 
h2{color:#4F4F4F; font- size:16px;font- family: 微 软 雅 黑 ;} 
p{text- indent :2em; line- height:1.5em;} 
a{text- decoration:none;color:green;font- family: 微 软 雅 黑 ;} 
.em{font- size:20px;font- family: 隶 书 ;font- style:italic;color:red} 
</style> 
</head> 
<body> 
<hl1> 介 绍 我 的 学 校 < /hl> 
<ul> 
<1i><a href= 叶 intro"> 学 校 简介 </a></1i> 
<1i><a href= 叶 spirit"> 大 学 精神 </a></1i> 
<1i><a href=- "##campus"> 校 园 风光 </a>< /1i> 
</ul> 
<h2 ig- "intro"> 学 校 简介 </h2> 
< img src= "1395150360585.jpg" width= "900" height= "300" border="0" alt="" 
align="center"> 
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<p> 学 校 坐落 于 美丽 的 海滨 城市 大 连 , 地 处 大 连 软件 园 核心 区 域 , 占 地 面积 60.3 万 平方 米 ,总 
建筑 面积 39.9 万 平方 米 , 现 有 在 校生 14000 余 人 。 学 校 现 设 有 15 个 教学 机 构 , 学 科 专 业 涵盖 
工学 ,管理 学 ,艺术 学 .文学 4 个 学 科 门 类 , 共 设 置 了 28 个 本 科 专 业 , 面 向 29 个 省 市 招生 ,同时 
还 有 13 个 高 职 专科 专业 面向 15 个 省 市 招生 。< /p> 
<h2 id= "spirit"> 大 学 精神 < /h2> 
<p><span class= "em"> 我 们 的 校训 是 : 精 勤 博学 ,学 以 致 用 。< /span> " 精 勤 博学 "强调 的 是 
为 学 为 人 的 态度 和 原则 ,并 诠释 了 "学 "的 程度 方式 方法 和 范畴 。" 学 以 致 用 " 旨 在 倡导 将 学 与 
用 紧密 联系 起 来 ,学 用 结合 ,知行 合 一 ,将 知识 运用 于 实际 应 用 ,并 在 应 用 中 敢 为 人 先 , 勇 于 创 
新 ,使 所 学 能 够 真正 为 社会 创造 价值 ,从 而 实现 个 人 价值 和 社会 价值 的 统一 ,达成 "教育 创造 
学 生 价 值 ,学 生 创造 社会 价值 "的 目标 ,彰显 教育 的 价值 和 使 命 。< /p> 
<h2 id= "campus"> 校 园 风 光 < /h2> 
< img src= "1492592299970.jpg" width= "900" height= "300" border= "0" alt="" 
align= "center"> 
< /body> 
</html> 


4. 知识 运用 
要 求 : 完成 如 图 4. 8 所 示 的 古文 对 联网 页 的 制作 ,并 且 设 置 字体 为 红色 隶书 、 字 号 为 
40px, 并 使 用 阴影 . 左 对 齐 、 行 高 .字母 间距 等 文字 属性 。 


精 勤 博学 


筋 志 震 ， 筋 芒 成 ， 

豆 答 沉 和 内， 百 二 类 类 经 归 矣 

兽人 心 人 人， 天 不 碳 ， 

有 陵 券 尝 悍 ， 三 于 雹 万 可 矢 尝 
图 4.8 古文 对 联 
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4.3.1 边框 


元 素 的 边框 是 围绕 在 元 素 内 容 和 内 边 距 之 外 的 条 线 ,通常 通过 设置 边框 的 不 同属 性 
实现 不 同 的 表现 形式 。 一 般 我 们 关注 边框 ,主要 是 关注 它 的 宽度 、 样 式 以 及 颜色 。 通 俗 来 
讲 ,样式 就 是 边框 的 外 部 形状 。 
border-style 属性 定义 边框 的 样式 ,如 设置 双 线 边框 的 语法 举例 如 下 。 
img {border- style:double;} <!-- 将 图 片 的 边框 设置 为 双 线 边框 样式 --> 


其 他 边框 样式 如 图 4. 9 所 示 。 
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A dashed border 


solid border 


double border | 


IA groove border 





A ridge border | 





证 inset border 


An outset border 
图 4.9 边框 样式 


如 果 想 设置 4 个 边框 不 同 的 样式 ,可 以 使 用 border-left-style 设置 左边 框 ,使 用 
border-top-style 设置 上 边框 ,使 用 border-bottom-style 设置 下 边框 ,使 用 border-right- 
style 设置 右边 框 。 分 别 对 不 同 边框 属性 进行 设置 可 丰富 表现 形式 ,更 有 利于 视觉 表达 。 

由 border-color 属性 定义 边框 颜色 。 例 如 : 


pl 





border- style:solid; 
border- color:#£f£0000 #0000ff; 
} 
border-color 属性 用 于 设置 4 条 边框 的 颜色 。 此 属性 可 设置 1 一 4 种 颜色 。 
border-color 属性 是 一 个 简写 属性 ,可 设置 一 个 元 素 的 所 有 边框 中 可 见 部 分 的 颜色 ， 
或 者 为 4 个 边 分 别 设置 不 同 的 颜色 。 请 看 下 面 的 例子 。 
。 例子 1: 


border- color:red green blue pink; 


4 个 颜色 分 别 赋予 4 个 边框 ,依次 是 上 框 红 色 、 右 框 绿色 、 下 框 蓝 色 、 左 框 粉色 。 
。 例子 2: 


border- color:red green blue; 


3 个 颜色 分 别 赋予 4 个 边框 ,依次 是 上 框 红 色 、 左 右 框 绿色 、 下 框 蓝 色 。 
。 例子 3: 


border- color: red green; 


两 个 颜色 分 别 赋予 4 个 边框 ,依次 是 上 下 框 红色 、 左 右 框 绿 色 。 
。 例子 4: 





border- color:red; 


所 有 4 个 边框 都 是 红色 。 
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主意 ,边框 的 样式 不 能 为 none 或 hidden, 和 否则 边框 不 会 出 现 。 

始终 把 border-style 属性 声明 放 到 border-color 属性 之 前 。 元 素 必须 在 赋予 其 颜 
色 之 前 获得 边框 。 
border-width 属性 定义 边框 的 宽度 。 可 以 设置 4 个 边 相 同 的 宽度 ,也 可 以 设置 4 
个 边 不 同 的 宽度 。 
例如 

















Pp 
border- style: solid; 
border-width: 5px 10px 

} 


其 显示 效果 如 图 4. 10 所 示 。 


图 4.10 边框 宽度 


边框 宽度 的 合法 值 见 表 4.7。 
表 4.7 边框 宽度 的 合法 值 























值 描 述 值 描 述 
thin 定义 细 的 边框 px 以 像素 单位 自 定义 边框 的 宽度 
medium | 默认 。 定 义 中 等 的 边框 inherit | 规定 应 该 从 父 元 素 继承 边框 宽度 
thick 定义 粗 的 边框 


注意 ,由 于 border-style 的 默认 值 是 none, 如 果 没 有 声明 样式 ,就 相当 于 border- 
style: none, 此 时 border-color、border-width 都 将 无 效 。 因 此 ,如 果 和 希望 边框 出 现 ,就 必 
须 声 明 一 个 边框 样式 。 

另外 ,border 属性 是 所 有 边框 属性 的 简写 ,可 以 在 一 个 声明 中 设置 所 有 的 边框 属性 。 

可 以 按 顺 序 设置 如 下 属性 。 


border- width 
border- style 


border- color 
例如 : 


pi 
border:5px solid red; 
} 
如 果 不 设置 其 中 的 某 个 值 ,也 不 会 出 问题 ,如 border:solid #ff0000; 也 是 允许 的 。 
常用 的 边框 属性 总 结 见 表 4. 8。 
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表 4.8 常用 的 边框 属性 总 结 





















































属 性 描 述 
border 同时 设置 4 个 边框 
border-style 设置 边框 样式 
border-width 设置 边框 宽度 
border-color 设置 边框 颜色 
border-bottom 将 下 边框 的 所 有 属性 设置 在 一 个 声明 中 
border-bottom-color 设置 下 边框 颜色 
border-bottom-style 设置 下 边框 样式 
border-bottom-width 设置 元 素 的 下 边框 的 宽度 
4.3.2 边框 阴影 
box-shadow 属性 向 边框 添加 一 个 或 多 个 阴影 。 
例如 ,向 div 元 素 添加 阴影 ,效果 如 图 4.11 所 示 。 
div{ 
box- shadow: 10px 10px 5px #888888; 
} 
box-shadow 的 语法 如 下 。 图 4.11 阴影 
box- shadow: h- shadow v- shadow blur spread color inset; 
参数 说 明 见 表 4. 9。 
表 4.9 参数 说 明 
值 描 述 值 描 述 
h-shadow | 必需 ,水 平 阴 影 的 位 置 ,允许 负 值 spread 可 选 ,阴影 的 尺寸 
vshadow | 必需 ,垂直 阴影 的 位 置 ,允许 负 值 color 可 选 ,阴影 的 颜色 ,请 参阅 CSS 颜色 值 
blur 可 选 ,模糊 距离 inset 可 选 , 将 外 部 阴影 (outset) 改 为 内 部 阴影 
例如 : 
div{ 
width:300px; 
height:100px; 


background- color:#f£f9900; 


一 Imoz-box- shadow: 10px 10px 5px #888888; 


box- shadow: 10px 10px 5px #888888; 


/x* 低 版 本 Firefoxx / 
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此 例 中 规定 阴影 水 平 位 移 为 10px, 垂直 位 移 为 10px, 模 糊 距离 为 5px, 阴 影 颜 色 为 
井 888888 ,为 兼容 低 版 本 Firefox 浏览 器 加 前 级 -moz-。 


4.3.3 圆 角 边 框 


为 了 美化 效果 ,通常 会 对 一 个 边框 使 用 圆 角 属性 。 使 用 border-radius 可 以 设计 元 素 
以 圆 角 的 样式 显示 ,其 基本 语法 如 下 。 


border- radius:10px; < ! 一 设置 圆 角 半 径 为 10 像 素 --> 
其 显示 效果 如 图 4. 12 所 示 。 


图 角 边 框 


图 4.12 圆 角 边框 





有 时候 会 对 元 素 不 同 的 位 置 定 义 圆 角 ,这 样 就 需要 分 别 设置 。borde-radius 属性 派 
生 了 4 个 子 属性 。 

borde-top-right-radius: 定义 右上 角 的 圆 角 。 

borde-top-left-radius: 定义 左上 角 的 圆 角 。 

borde-bottom-right-radius: 定义 右 下 角 的 圆 角 。 

borde-bottom-left-radius: 定义 左下 角 的 圆 角 。 


4.3.4 图形 边框 


border-image 是 CSS3 新 增 的 属性 ,用 于 定义 图 形 边框 ,可 以 制作 出 更 加 多 样 化 的 边 
框 效果 。 
border-image 属性 是 以 下 属性 的 简写 ,具体 描述 见 表 4. 10。 


表 4.10 border-image 属性 




















值 描 述 
border-image-source 用 在 边框 的 图 片 的 路 径 
border-image-slice 图 片 边框 剪裁 位 置 向 内 偏 移 
border-image-width 片 边框 的 宽度 
border-image-outset 边框 图 像 区 域 超出 边框 的 量 
border-image-repeat 图 像 边 框 是 否 应 重复 (repeated) , 平 铺 (rounded) 或 拉 伸 (stretched) 
例如 : 
div{ 


border:15px solid transparent; 
width:200px; 
border- image:url (img/g2.jpg) 30 30 round; 


此 例 中 ,图 片 的 路 径 为 img/g2. jpg, 剪 裁 位 置 向 内 偏 移 30 像素 ,图 片 填充 宽度 为 30 


像素 , 平 铺 方式 。 i owe 9 -全 ZERI 


其 显示 效果 如 图 4. 13 所 示 。 习 .示例 文字 1 把 
关于 兼容 性 问题 ,这 里 介绍 一 下 常见 浏览 器 内 核 。 | :于 地 : 
1. Trident 内 核 轿 3 


该 内 核 程序 在 IE4 中 首次 被 采用 ,是 微软 在 Mosaic 代 ”这 是 我 们 使 用 的 图 片 
码 的 基础 之 上 修改 而 来 的 ,并 沿用 到 IE11 ,也 被 普遍 称 作 “大 * 革 时 2 IT 
“IE 内 核 "。Trident 实际 上 是 一 款 开放 的 内 核 ,其 接口 内 党、 尝 w .“” 养 疤 
核 设计 得 相当 成 熟 ,因此 才 有 许多 采用 内核 而 非 的 、 几 “了 
浏览 器 涌现 。 人 


1 
Trident 内 核 的 常见 浏览 器 有 IE6、IE7、IE8 IE9、 名， 全 人 
IE10、 猜 豹 安全 浏览 器 、360 安全 浏览 器 .360 极速 浏览 器 、 已 关注 光 关 六 "| 
A 
搜狗 高 速 浏览 器 。 


图 4.13 图 形 边框 
2. WebKit 内 核 


WebKit 内 核 常见 的 浏览 器 有 Apple Safari、Symbian 手机 浏览 器 、Android 默认 浏览 
器 .Google Chrome、360 极速 浏览 器 以 及 搜狗 浏览 器 高 速 模式 。 


3. Blink 内 核 


Blink 是 一 个 由 Google 和 Opera Software 开发 的 浏览 器 排版 引擎 ,这 一 泻 染 引擎 是 
开源 引擎 WebKit 中 WebCore 组 件 的 一 个 分 支 ,并 且 在 Chrome(28 及 往 后 版 本 )、Opera 
(15 及 往 后 版 本 ) 和 Yandex 浏览 器 中 使 用 。 

上 述 代码 在 浏览 器 不 兼容 时 需要 加 前 级 ,例如 : 

div{ 

—webkit- border- image:url (border.png) 30 30 round; /* Safari 5 */ 
—0o-border- image:ur]l (border .png) 30 30 round; /* Opera */ 
border- image:url (border .png) 30 30 round; 

} 


4.3.5 背景 


在 CSS 中 可 以 使 用 背景 属性 创建 需要 的 样式 。 背 景 属性 包括 背景 颜色 .背景 图 片 以 
及 背景 的 位 置 。 

背景 色 通过 使 用 background-color 属性 进行 设置 ,如 使 用 如 下 请 名 设置 了 纯色 背景 。 

p {background- color: gray;} < ! 一 段落 背景 设置 为 灰色 --> 


如 果 需 要 设置 图 像 背景 , 则 使 用 background-image 属性 ,必须 为 这 个 属性 设置 一 个 
url 值 。 
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p{background- image:url (. ./image/2009.jpg); }< ! 一 段落 使 用 背景 图 片 --> 


上 面 语句 中 ,将 名 字 为 2009. jpg 的 图 片 作为 背景 ,但 是 一 定 要 注意 文件 存放 的 位 置 ， 
如 果 图 片 文件 路 径 不 正确 ,将 无 法 正确 显示 。 
background-position 属性 设置 背景 图 像 的 起 始 位 置 , 也 就 是 如 何 定位 背景 图 片 。 
例如 : 
div{ 

border:1px solid black; 

width:200px; 

height:200px; 

background- image:url (img/f2.jpg) 7 

















background- position:75% 0%; 
} 


其 中 ,原始 图 片 如 图 4. 14 所 示 。 


服饰 年 中 大 促 


超 姐 品 岗 日 
春 夏 折扣 季 低 至 5 折 
ZARA 





图 4.14 原始 图 片 


通过 background-position 属性 定位 后 的 图 片 如 图 4. 15 所 示 。 








图 4.15 图 片 定位 示例 


把 background-attachment 属性 设置 为 fixed, 才 能 保证 该 属性 在 Firefox 和 Opera 中 
能 正常 工作 。 
例如 : 


body{ 
background- image:url ('bgimage .gif'); 
background- repeat :no- repeat; 
background- attachment :fixed; 
background- position:center; 


下 
background-position 的 取 值 参见 表 4. 11。 
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表 4.11 background-position 的 取 值 
值 描 述 





top left 
top center 
top right 


center left 


如 果 仅 规定 了 一 个 关键 词 ,那么 第 二 个 值 将 是 center 
默认 值 为 0%0% 


center center 
center right 
bottom left 
bottom center 


bottom right 





第 一 个 值 是 水 平 位 置 ,第 二 个 值 是 垂直 位 置 。 
x% y% 左上 角 是 0% 0%。 右 下 角 是 100% 100%。 
如 果 仅 规定 了 一 个 值 , 另 一 个 值 将 是 50% 





第 一 个 值 是 水 平 位 置 , 第 二 个 值 是 垂直 位 置 。 

左上 角 是 0 0。 单 位 是 像素 (0px 0px) 或 任何 其 他 的 CSS 单位 。 
如 果 仅 规定 了 一 个 值 , 另 一 个 值 将 是 50% 。 

可 以 混合 使 用 名 和 position 值 


xpos ypos 














background-size 规定 背景 图 像 的 尺寸 。 
例如 : 


div{ 
background:url (img flwr.gif); 
background- size:63px 100px; 
background- repeat :no- repeat; 








1 


其 中 ,原始 图 片 如 图 4. 16 所 示 。 通 过 background-size 属性 缩小 后 的 图 片 如 图 4. 17 
所 示 。 





图 4.16 原始 图 片 图 4.17 定义 图 片 尺寸 示例 


与 背景 相关 的 属性 总 结 见 表 4. 12。 
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表 4.12 与 背景 相关 的 属性 总 结 


























属 性 描 述 
background 将 背景 属性 设置 在 一 个 声明 中 
background-attachment 设置 背景 图 片 固 定 或 者 随 元 素 移动 
background-color 设置 元 素 背景 颜色 
background-image 设置 图 片 背景 
background-position 设置 背景 的 位 置 
background-repeat 设置 背景 图 像 是 否 重复 、 如 何 重复 
Background-size 设置 背景 图 像 尺寸 


4.3.6 项 目 : 校训 Logo 
1. 项目 说 明 


设计 并 制作 一 个 校训 Logo, 利 用 CSS 背景 和 边框 相关 的 属性 制作 出 如 图 4. 18 所 示 
的 页 面 效 果 。 


性 铅 ， 精 勤 博 学 ， 学 以 至 用 





图 4.18 校训 Logo 


2. 项 目 设计 


制作 校训 Logo, 使 用 的 素材 有 一 个 校徽 图 片 和 一 行 校训 文字 。 首 先 , 用 div 做 一 个 
大 盒子 ,填充 蓝 色 背景 ;在 这 个 大 盒子 里 添加 两 个 小 
盒子 。 在 两 个 小 念 子 里 分 别 放置 文字 和 图片 ,它们 | 本国 本 全 二 :二 
左右 相 邻 的 布局 可 以 通过 浮动 实现 。 左 边 的 校徽 图 
片 通过 背景 填充 , 原 图 片 如 图 4. 19 所 示 , 需 使 用 
background-position background-size 等 属性 调整 位 置 和 大 小 。 





图 4.19 原 图 片 





3. 项 目 实施 
本 项 目的 代码 如 下 。 


<html> 
<head> 
<title> 设 计 logo< /title> 


<meta charset= "utf- 8"> 


80 


年 多 css 图 二 
























< style type= "text/css"> 


#boxl { 
background: blue; 
width: 500px; 
height: 100px; 

3 

#box2 { 
width: 100px; 
height: 100px; 


background- image: Url (img/l0go.png); 
background- size: 480px 100px; 
background- repeat: no- repeat; 
float: left; 
} 
#box3 { 
text- align: center; 
font- family: 隶书 ; 
font- size: 40px; 
line- height: 100px; 
color: white; 
} 
</style> 
< /head> 
<body> 
<div id= "boxl"> 
<div id= "box2">< /div> 
<div id= "box3"> 精 勤 博 学 ,学 以 致 用 < /div> 
</div> 
< /body> 
< /html> 


4. 知识 运用 
完成 如 图 4. 20 所 示 的 边框 圆 角 练习 的 网 页 制作 ,要 求 使 用 圆 角 、 阴 影 等 属性 。 


本 实例 是 CSS3 实 现 DIV 圆 角 。 需 使 用 支持 CSS3 的 
浏览 器 运行 。 





图 4.20 边框 圆 角 练习 
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44 咖啡 商城 一 一 网 站 页 脚 模块 实现 


本 项 目 属 于 综合 项 目 中 的 首页 页 脚 部 分 的 实现 ,需要 用 到 本 章 所 学 的 文本 .字体 背 
景 等 属性 。 

(1) 对 页 脚 部 分 字体 ,文本 属性 的 设置 ,在 网 页 中 会 有 很 多 位 置 使 用 到 文本 、 字 体 属 
性 ,灵活 运用 这 些 属性 将 会 使 页 面 可 用 性 大 大 增强 。 

(2) 对 页 脚 的 宽度 ,高 度 以 及 背景 颜色 的 设置 。 

(3) 灵活 使 用 CSS 效果 可 以 使 网 页 显示 更 加 灵活 ,如 超 链接 文本 修饰 效果 、 内 容 溢 出 
效果 设置 等 。 


4.4.1 项 目 说 明 


咖啡 网 站 的 页 脚 部 分 包含 导航 链接 和 登录 、 注 册 按 钮 等 。 一 个 网 页 如 果 没 有 了 页 脚 ， 
就 像 一 篇 好 的 文章 没有 结尾 一 样 ,让 人 感到 头 重 脚 轻 , 既 不 美观 ,也 不 协调 。 页 脚 设计 主 
要 用 来 展示 网 站 的 版 权 和 网 站 介绍 ,通常 具有 导航 和 总 结 的 功能 ,还 有 美化 的 作用 。 合 理 
设计 页 脚 能 够 提升 用 户 体验 。 

“咖啡 网 站 页 脚 部 分 . html” 的 显示 结果 如 图 4. 21 所 示 。 











图 4.21 咖啡 网 站 页 脚 部 分 


4.4.2 项 目 设计 


首先 对 页 脚 的 大 小 进行 设置 ,本 项 目 中 使 用 width .height 等 属性 。 文 本 、 字 体 方面 ， 
我 们 使 用 font-size .color line-height textralign 等 属性 ,并 且 针 对 不 同 的 功能 分 别 进行 设 
置 。 另 外 ,为 实现 更 好 的 显示 效果 ,可 以 使 用 伪 类 对 超 链接 进行 美化 ,通过 设置 :hover 选 
择 器 实现 鼠标 悬浮 时 文本 修饰 效果 进行 变化 。 


4.4.3 项目 实施 
项 目 实 现代 码 如 下 所 示 。 


< !doctype html> 
<html> 

<head> 

<meta charset= "utf- 8"> 
<title> 页 脚 部 分 < /title> 
< style type= "text/css"> 
footer { 


background: #644108; 


捕 同 入 css 鲜 辆 


Color: #A9A9A9; 
padding- bottom: 10px; 
overflow: hidden; 
width: 1210px; 
} /* 设 置 页 脚背 景 颜色 字体 颜色 、 宽 度 等 属性 * / 
footer a{ 
Color: #FFF; 
text- decoration: none; 
} /* 设 置 超 链接 为 白色 ,无 下 夯 线 * / 
footer a:hover { 
color: #d2d0ce; 
text- decoration: underline; 
1/* 设置 当 鼠标 悬浮 时 显示 为 灰色 、 带 下 夯 线 * / 
footer .nav { 
top: 45px; 
right: 20px; 
position: absolute; 
line- height: 150%; 
text-align: left; 
} /* 该 部 分 使 用 了 绝对 定位 ,并 设置 了 行 高 和 对 齐 方式 * / 
footer .footer { 
text- align: center; 
overflow: hidden; 
Zoom: 1; 
width: auto; 
height: 68px7 
Color: #FFFFEF; 
position: relative; 
3 
footer .login { 
background- color: #598428; 
Color: #FFF; 
padding: 3px 14px; 
margin- left: 10px; 
}/* 设置 会 员 登 录 按 钮 的 背景 色 .字体 颜色 等 属性 * / 
footer .register { 
background- color: #F36523; 
Color: #FFF; 
padding: 3px 14px; 
}/* 设置 会 员 注册 按钮 的 背景 色 、 字 体 颜色 等 属性 x / 
</style> 
</head> 
<body> 
<footer> 
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<div class= "footer box"> 
<div class="nav"> <a href="#" target=" blank"> 网 站 地 图 </a>/<a target=" 
blank" href="#"> 关 于 我 们 </a>/<a target=" blank" href="#"> 沙 龙 动态 </a>/<a 
target= "blank" href= 叶 "> 友情 链接 < /a> /<a target=" blank" href= 叶 "> 联系 我 们 < /a 
>/<a target=" blank" href="#"> 版 权 声明 < /a><a target=" blank" class="login" 
href=""> 会 员 登录 < /a><a target=" blank" class= "register" href=""> 会 员 注 册 < /a 
><br> 

<div style= "text- align:left; padding- top:5px;">< /div> 


</div> 
</div> 
</footer> 
</body> 
</htm> 
习 题 
一 、 选 择 题 
1. CSS 指 的 是 ( Ns 
A. Computer Style Sheets B. Cascading Style Sheets 
C. Creative Style Sheets D. Colorful Style Sheets 
2. CSS 样式 表 不 能 实现 ( 。”) 功 能 。 
A. 将 格式 和 结构 分 离 B. 一 个 CSS 文件 控制 多 个 网 页 
C. 控制 图 片 的 精确 位 置 D. 兼容 所 有 的 浏览 器 


3. 在 HTML 文档 中 ,引用 外 部 样式 表 的 正确 位 置 是 ( Ys 
A. 文档 的 末尾 B. 文档 的 顶部 C. 一 body> 部 分 “D. 二 head 放 部 分 
4.( ) 属 性 可 用 来 定义 内 联 样式 。 


A. font B. class C. styles D. style 
5. 选项 ( ) 的 CSS 语法 是 正确 的 。 
A. body:color= black B. {body:color= black(body} 
C. body {color: black} D. {body;color:black} 
6. 为 所 有 的 二 hl 二 元 素 添 加 背景 颜色 的 语法 为 ( Ns 
A. hl.all {background-color: # FFFFFF)} 
B. hl {background-color: # FFFFFF} 
C. all. hl {background-color: # FFFFFF} 
D. all. hl {backgroundcolor: # FFFFFF} 
7. 改变 某 个 元 素 的 文本 颜色 的 属性 为 ( 辣 
A. text-color: B. fgcolor: C. color: D. text-color= 
8 ) 属 性 可 控制 文本 的 尺寸 。 
A. font-size B. text-style C. font-style D. text-size 
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9. 在 以 下 的 CSS 中 ,可 使 所 有 二 p 元 素 变 为 粗 体 的 正确 语法 是 ( i 


A. =p style= "font-size:bold"> B. =p style= "text-size:bold"> 


C. p {font-weight: bold} D. p {text-size:bold} 
10. 如 果 要 使 用 CSS 将 文本 样式 定义 为 粗 体 , 需 要 设置 的 文本 属性 是 ( )。 


A. font-family B. font-style C. font-weight D. font-size 


11. 显示 没有 下 夯 线 的 超 链接 的 CSS 语法 为 ( “)。 
A. a {text-decoration:none} 
B. a {text-decoration:no underline} 
. a {underline:none} 


总 
D. a {decoration:no underline} 
€ 


吕 ) 使 文本 以 大 写字 母 开 头 。 
A. text-transform:capitalize B. 无 法 通过 CSS 实现 
C. text-transform:uppercase C. text-animation:uppercase 


3. 改变 元 素 字体 的 属性 为 ( 





)。 


A. font= B. f: C. font-family: D. font-size: 
4. CSS 中 ID 选择 符 在 定义 的 前 面 要 有 指示 符 ( 

A. * B: ; Go D. # 
5. 在 CSS 的 文本 属性 中 ,文本 修饰 的 取 值 text-decoration: overline 表示 ( 

A. 不 用 修饰 B. 下 画 线 

C. 上 画 线 D. 横 线 从 字 中 间 穿 过 
6. 外 部 样式 文件 的 扩展 名 为 ( ”)。 

A als B. .dom CG. htm D; seas 
7. 在 CSS 中 使 用 背景 图 片 需要 用 参数 ( 和 5 

A. image B. url C. style D. embed 
二 、 综 合 题 


1. 使 用 HTML 十 CSS 制作 如 图 4. 22 所 示 的 百度 首页 页 面 效果 。 





Bai 灌 百度 








品 


气 米 。 产 闻 ”hao123 地 图 视频 贴吧 登录 设置 a 








图 4.22 示例 页 面 


2. 利用 CSS 对 网 页 页 面 做 如 下 设置 。 


(1) hl 标题 字体 颜色 为 白色 、 背 景 颜色 为 蓝 色 、 居 中 、4 个 方向 的 填充 值 均 为 15px。 
(2) 使 文字 环绕 在 图 片 周围 ,图 片 边线 : 粗细 1px, 颜 色 间 9999cc, 虚 线 ,与 周围 元 素 
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的 边界 为 5px。 
(3) 段落 格式 : 字体 大 小 12px, 首 行 缩 进 两 字符 、 行 高 1.5 倍 行距 、 填 充值 5px。 
(4) 消除 网 页 内 容 与 浏览 器 窗口 边界 间 的 空白 ,并 设置 背景 色 #ccccff。 
(5) 给 两 个 段落 加 不 同 颜色 的 右边 线 3px double red 和 3px double orange。 
最 终 显示 效果 如 图 4. 23 所 示 。 


互联 网 发 展 的 起 源 





1969 年 ， 为 了 保障 通信 联络 ， 美 国 国防 部 高 级 研究 计划 署 AEPA 资 助 建立 了 世界 上 第 一 个 分 粗 交 换 试验 网 
“ARPANET ,连接 美国 四 个 大 学 。ARPANET 的 建成 和 不 断 发 展 标志 着 计算 机 网 络 发 展 的 新 纪元 。 


。 。 20 世纪 To 年代 末 到 eo 年 代 初 ， 计算 机 网 络 东 过 发 展 ， 各 种 各 样 的 计算 机 网 络 应 运 而 生 ,#0NILIET、 
,WSENET、BITNET、CSWET 等 ， 在 网 络 的 规模 和 数量 上 都 得 到 了 很 大 的 发 展 。 一 系列 网 络 的 建设 ,产生 了 不 同 网 
AS 


. 络 之 间 互联 的 需求 ， 并 最 终 导致 了 TCP/IF 协 议 的 诞生 。 





图 4.23 示例 页 面 
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CSS 盒子 模型 


本 章 概述 

通过 本 章 的 学 习 , 重 点 掌握 CSS 中 盒子 模型 的 各 个 属性 ,熟练 使 用 margin、padding、 
border、width 等 属性 ,掌握 盒子 模型 的 3 种 定位 机 制 ,了 解 display 属性 、 显 示 及 隐藏 的 方 
法 。 通 过 对 5 个 金子 项 目的 实施 ,掌握 浮动 .position 定位 等 机 制 。 

学 习 重 点 与 难点 

重点 : 

(1) 盒子 相关 属性 。 

(2) 浮动 定位 。 

(3) 位 置 定位 。 

(4) display 属性 。 

难点 : 

(1) 浮动 定位 。 

(2) clear 属性 。 

(3) CSS 的 层 登 。 

重点 及 难点 学 习 指导 建议 : 

。 金子 模型 在 前 端 开 发 中 非常 重要 ,重点 掌握 CSS 中 念 子 模型 的 各 个 属性 ,学 生 须 

通过 大 量 编码 练习 强化 记忆 。 
。 浮动 和 定位 在 页 面 布局 中 有 着 重要 的 意义 ,是 学 习 时 必须 掌握 的 重点 ,通过 编码 
实践 ,比较 每 一 个 属性 值 不 同 的 含义 。 
。 了解 clear 属性 知识 ,从 而 设置 元 素 的 菜 个 方向 不 允许 出 现 浮动 元 素 。 
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51 盒子 相关 属性 


在 网 页 设计 中 ,经 常会 使 用 内 容 (content) 内 边 距 (padding) ,边框 (border)、 外 边 距 
(margin) 等 属性 。 如 图 5. 1 所 示 ,可 以 视 这 些 CSS 属性 为 日 常生 活 中 的 盒子 模型 ,盒子 
模型 是 实现 网 页 布局 的 基础 ,学 习 网 页 布局 必须 了 解 盒子 模型 。 

盒子 模型 如 图 5. 1 所 示 。 俯 视 这 个 盒子 ,margin 为 盒子 边缘 与 其 他 物体 的 距离 ,一 
般 称 为 边界 或 外 边 距 ;border 类 似 于 盒子 的 厚度 , 称 为 边框 ;padding 是 填充 的 厚度 ,一般 
称 为 填充 或 者 内 边 距 ;而 content 为 盒子 的 内 容 。 也 就 是 说 ,整个 盒子 在 页 面 中 占 的 位 置 


大 小 应 该 是 内 容 的 大 小 加 上 填充 的 厚度 再 加 上 框 边 的 厚度 再 加 上 它 的 外 边 距 。 





margin 边 界 
border 框 边 


content 内 容 


xoq 

















图 5.1 盒子 模型 


5.1.1 内 边 距 和 外 边 距 

在 HTML 中 ,每 个 元 素 都 可 以 被 视 为 一 个 “盒子 ” ,不管 这 个 元 素 是 段落 ,还 是 图 像 。 
想象 一 个 盒子 , 它 有 上 、 下 左右 4 条 边 ,所 以 每 个 属性 除了 内 容 (content) ,都 包括 4 个 
部 分 : 上 、 下 、 左 、 有 ;这 4 部 分 可 同时 设置 ,也 可 分 别 设置 ,如 图 5. 2 所 示 。 





margin-top 
jer-top 


padding-top 


height 

Pl 
margin-left | 
padding-teft 


padding-right 
margin-right 





padding-bottom 


margin-bottom 








! width 
图 5.2 标准 盒子 模型 


下 面 分 别 说 明 各 个 属性 的 语法 。 
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1. 外 边 距 


外 边 距 属性 也 称 为 边界 属性 ,根据 上 、 下 、 左 、 右 4 个 方向 可 细 分 为 上 边 距 (margin- 
top) ,下 边 距 (margin-bottom)、 左 边 距 (margin-left)、 右 边 距 (margin-right)。 一 般 情 况 
下 ,可 以 使 用 margin 属性 一 次 性 设置 4 个 边 距 ,也 可 以 分 别 对 不 同 的 边 距 设置 不 同 的 属 
性 ,设置 时 必须 按 顺 时 针 方 向 依次 代表 上 、 右 、 下 、 左 4 个 方向 的 属性 值 。 如 果 省 略 , 则 按 
上 下 \ 左 右 同 值 处 理 。 

例如 ,有 如 下 请 句 : 


{margin:1px 2px 3px 4px;} 
有 4 个 值 ,表示 上 外 边 距 为 1px, 右 外 边 距 为 2px, 下 外 边 距 为 3px, 左 外 边 距 为 4px。 
{margin:1px 4px;} 
有 两 个 值 ,表示 上 下 外 边 距 为 1px, 左 右 外 边 距 为 4px。 
除了 上 述 设置 具体 值 之 外 ,也 可 以 设置 水 平 位 auto, 这 样 做 会 使 盒子 里 的 水 平 位 置 
自动 居中 。 
如 下 面 代码 所 示 ,样式 设置 为 
.margin{ 
width:200px; 
margin:0px auto 
3 
内 容 设 置 为 
<p class= "margin"> 使 用 auto 效 果 < /p> 


在 浏览 器 中 运行 该 代码 ,结果 显示 该 段落 位 置 为 水 平 居中 。 
2. 边 框 属 性 


边框 (border) 有 3 个 属性 : 颜色 (border-color)、 粗细 (border-width) 、 样 式 C(border- 
style) 。 
例如 ,边框 粗细 的 说 明 如 下 。 


border- width: thin 10px thick medium < !-- 对 盒子 的 边框 粗细 进行 设置 --> 


对 边框 的 设置 方法 是 : 按照 规定 的 顺序 给 出 1 个 .2 个 、3 个 或 者 4 个 属性 值 , 它 们 的 
含义 将 有 所 区 别 , 具 体 含义 如 下 。 

(1) 如 果 给 出 1 个 属性 值 ,表示 4 个 边框 的 属性 一 样 。 

(2) 如 果 给 出 2 个 属性 值 ,前 者 表示 上 下 边框 的 属性 ,后 者 表示 左右 边框 的 属性 。 

(3) 如 果 给 出 3 个 属性 值 , 前 者 表示 上 边框 的 属性 ,中 间 的 数值 表示 左右 边框 的 属 
性 ,后 者 表示 下 边框 的 属性 。 

(4) 如 果 给 出 4 个 属性 值 ,依次 表示 上 .、 右 、 下 、 左 边框 的 属性 , 即 顺 时 针 排 序 。 
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3. 内 边 距 


内 边 距 (padding) 属 性 ,也 称 为 填充 属性 ,设置 的 是 内 容 与 边框 的 距离 。 同 外 边 距 属 
性 一 样 ,内 边 距 属性 也 包括 上 、 下 、 左 、 右 4 个 方向 的 属性 值 ,其 使 用 方法 请 参照 外 边 距 属 
性 代码 。 

如 图 5. 3 所 示 , 有 时候 网 页 中 或 者 盒子 中 的 内 容 并 不 能 完全 填充 到 整个 区 域 中 ,这 时 
可 以 使 用 内 边 距 padding 调整 盒子 中 内 容 的 位 置 。 

例如 ,要 将 图 5. 3 中 盒子 的 文字 居中 ,可 对 代码 进行 如 下 更 改 。 


pi 
width: 150px; 
height: 50px; 
background- color: pink; 
padding- left: 40px; 

3 


在 IE11 中 其 显示 结果 如 下 。 
这 是 一 个 盒子 这 是 一 个 盒子 


图 5.3 盒子 示例 图 5.4 内 边 距 使 用 效果 


5.1.2 块 级 元 素 与 行内 元 素 


大 多 数 HTML 元 素 都 被 定义 为 块 级 元 素 (block) 或 行内 元 素 (inline) 。 

(1) 块 级 元 素 默认 占 一 行 ,一 行内 添加 一 个 块 级 元 素 后 ,一 般 无 法 再 添加 其 他 元 素 。 
例如 ,div、p\hl 一 h6 ul.oltable 都 是 块 级 元 素 。 

(2) 行内 元 素 会 在 一 条 直线 上 排列 (默认 宽度 只 与 内 容 有 关 ) ,都 是 同一 行 的 ,水 平方 
向 排列 。 例 如 ,aspan .img 都 是 行内 元 素 。 

它们 的 区 别 如 下 。 

块 级 元 素 可 以 包含 行内 元 素 和 块 级 元 素 。 行 内 元 素 不 能 包含 块 级 元 素 , 只 能 包含 文 
本 或 者 其 他 行内 元 素 。 

行内 元 素 与 块 级 元 素 属性 的 不 同 ,主要 是 盒 模型 属性 : 块 级 元 素 的 宽 高 、 行 高 以 及 外 
边 距 和 内 边 距 都 是 可 控 的 。 行内 元 素 设 置 width 无 效 , height 无 效 ( 可 以 设置 line- 
height) ,margin 上 下 无 效 ,padding 上 下 无 效 。 

块 级 元 素 的 用 法 : 

div 元 素 是 块 级 元 素 , 实 际 上 ,div 就 是 一 个 容器 , 它 把 文档 分 成 独立 的 .不 同 的 部 分 。 
div 还 有 一 个 最 常用 的 用 途 是 文档 布局 。 

例如 ,一 个 网 页 有 头 部 、 内 容 和 尾部 3 个 结构 ,那么 在 布局 时 就 可 以 用 3 个 div 标签 
把 3 个 部 分 划分 出 来 。 

行内 元 素 的 用 法 : 


多 窜 包 和 横 加 



















span 标签 是 行内 元 素 ,用 来 组 合 文档 中 的 行内 元 素 。 通 过 使 用 span 标签 ,可 以 更 好 
地 管理 行内 元 素 。 如 果 不 加 样式 ,span 元 素 中 的 文本 与 其 他 文本 不 会 有 任何 区 别 。 当 想 
给 某 些 文字 设置 特殊 样式 时 ,可 以 使 用 以 下 语句 。 
<body> 
<p><span style= "font- style: italic;"> 注 释 < /span> span 是 行内 元 素 < /p> 
< /body> 


其 显示 结果 为 : 


在 CSS 中 ,将 各 版 块 看 作 一 个 个 盒子 ,可 以 利用 盒子 的 属性 描述 各 版 块 的 尺寸 .边界 
等 样式 ,而 位 置 方面 一 般 由 浏览 器 自动 控制 。 各 版 块 一 般 用 过 div 之 标签 进行 描述 , 即 采 
用 CSS+DIV 布局 。 使 用 CSS 可 以 灵活 设置 div 元 素 的 样式 , width 属性 用 于 设置 其 宽 
度 ,height 属性 用 于 设置 其 高 度 。 一 般 用 px 作为 固定 尺寸 的 单位 。 单 位 为 百分比 时 ,div 
元 素 的 宽度 和 高 度 为 自 适 应 状态 。 

盒子 在 标准 流 中 的 定位 原则 如 下 。 


1. 块 级 元 素 之 间 的 坚 直 margin 
如 下 面 语句 所 示 : 


<div style= "margin- bottom:50px;"> 块 元 素 1< /div> 
<div style= "margin- top:30px;"> 块 元 素 2< /div> 


例如 , 想 要 依次 放置 两 个 盒子 ,并 且 设 置 了 块 元 素 1 的 下 边界 为 50px, 块 元 素 2 的 上 
边 距 为 30px, 这 样 就 形成 了 一 种 如 图 5. 5 所 示 的 塌陷 现象 。 


margin-bottom:5opx margin-bottom:5opx 


图 5.5 塌陷 现象 


2. margin 中 的 负 值 
如 下 面 语句 所 示 。 


.left{ 
margin- right:30px; 
background- color:#a9d6ff;} 
-right{ 
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margin- left:- 53px; /x* 设置 为 负数 * / 
background- color:#eebOb0; 


} 
如 果 在 margin 中 使 用 了 负 值 ,那么 就 会 出 现 如 图 5. 6 所 示 的 释 加 现象 。 


图 5.6 从 加 现象 图 5.7 5 个 盒子 实例 





5.1.3 项 目 : 盒子 模型 
1. 项 目 说 明 


为 “5 个 盒子 . html” 设 置 CSS 样式 ,显示 结果 如 图 5.7 所 示 。 

页 面 上 一 共有 5 个 盒子 。 

(1) 最 外 层 的 盒子 为 黄色 背景 ,宽度 为 350px, 内 边 距 宽度 为 10px。 

(2) Box-1、Box-2、Box-3 每 个 小 盒子 都 设置 为 黑色 虚线 框 (dashed black) ,1px 宽 , 背 
景色 为 #00CCFF ,外边 距 和 内 边 距 均 为 10px。 

(3) 第 4 个 盒子 为 文本 ,背景 为 粉色 ,外 边 距 宽 度 为 10px。 


2. 项 目 设 计 


首先 ,用 div 定义 一 个 大 盒子 ,然后 在 里 边 放置 4 个 小 盒子 ,分 别 是 3 个 div 和 一 个 
p。 盒 子 的 样式 将 要 用 到 的 属性 包括 背景 色 (background-color)、 宽 度 (width) 内 边 距 
(padding)、 外 边 距 (margin) 边框 宽度 (border-width) .边框 线 型 (border-style), 其 中 
border-width border-style border-color 可 以 合并 简写 成 border 属性 。 盒 子 的 高 度 由 其 
内 容 的 高 度 决 定 。 


3. 项 目 实施 
项 目 代码 如 下 所 示 。 


<html> 
<head> 
<title>New Document< /title> 
<style> 
.outter{border: 1px solid black; width:350px;background:yellow; 


OE demR@ 


padding:10px;} 
div{border:1px dashed black;background:#00CCFF;margin:10px;padding: 
10px;} 
p{border:1px dashed black;background:pink;margin:10px} 
</style> 
</head> 
<body> 
<div class= "outter"> 
<div class= "boxl">Box- 1< /div> 
<div class= "box2"> Box- 2< /div> 
<div class= "box3"> Box- 3< /div> 
<p> 在 网 页 设计 时 ,我 们 要 注意 使 用 内 容 、 填 充 , 框 边 、 边 界 等 属性 ,对 盒子 的 内 容 \、 样 式 、 
布局 有 一 个 合理 的 表示 方法 ,使 界面 整洁 规范 。< /p> 
</div> 
< /body> 
</htm> 


4. 知识 运用 


完成 如 图 5. 8 所 示 的 盒子 相关 属性 练习 的 网 页 制作 ,请 思考 如 何 将 两 个 盒子 放置 在 
同一 行内 。 


THIS IS HEADER 


THIS IS LEFT 
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52 浮动 定位 


在 CSS 中 ,如 何 定位 是 网 页 整体 布局 的 关键 。CSS 有 3 种 基本 的 定位 机 制 : 普通 流 、 
浮动 和 位 置 定位 。 
5.2.1 float 属性 

在 CSS 中 ,通过 float 属性 实现 元 素 的 浮动 。float 属性 定义 元 素 在 哪个 方向 浮动 。 
以 往 这 个 属性 总 应 用 于 图 像 ,使 文本 围绕 在 图 像 周围 , 不 过 ,在 CSS 中 ,任何 元 素 都 可 以 


浮动 。 浮 动 元 素 会 生成 一 个 块 级 框 ,而 不 论 它 本 身 是 何 种 元 素 。 
float 属性 实现 元 素 的 浮动 主要 有 以 下 几 种 形式 ( 表 5. 1)。 
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表 5.1 主要 浮动 形式 














值 描述 
left 元 素 向 左 浮动 
right 元 素 向 右 浮动 
none 默认 值 ,元 素 不 浮动 ,显示 其 在 文本 中 出 现 的 位 置 
inherit 规定 应 该 从 父 元 素 继承 float 属性 的 值 





在 “盒子 模型 "项 目 实 施 过 程 中 使 用 了 盒子 模型 ,如 果 在 该 模型 中 添加 如 下 请 句 : 
.boxl{float:left} 
结果 是 “Box-1” 向 左 浮动 ,浮动 的 块 不 能 独立 占领 一 行 ,以 自 适应 宽度 存在 , 居 左 对 齐 。 其 
下 一 行 *“Box-2” 受 到 浮动 的 影响 向 上 移动 ,如 图 5.9 所 示 。 
然后 再 添加 如 下 语句 : 
.box2{float:left} 


结果 是 “Box-2” 向 左 浮动 ,其 下 一 行 “Box-3” 受 到 浮动 的 影响 向 上 移动 ,如 图 5. 10 所 示 。 



















图 5.9 盒子 向 左 浮动 效果 (一 ) 图 5.10 盒子 向 左 浮动 效果 (二 ) 


















最 后 再 添加 如 下 语句 。 
.box3{float:left} 
该 语句 的 作用 是 将 盒子 box3 向 左 浮动 ,此 时 段落 受到 浮动 的 影响 ,向 上 移动 ,网 页 


显示 效果 如 图 5. 11 所 示 。 

同 理 , 也 可 以 使 用 float:right 语句 将 盒子 向 右 浮 动 ,或 者 同时 使 用 不 同 的 语句 构造 不 
同 的 显示 效果 。 

如 果 修 改 盒 子 的 宽度 属性 ,将 boxl、box2、box3 的 每 个 宽度 都 设置 为 120px, 它 的 显 
示 结 果 如 图 5. 12 所 示 。 


图 5.11 盒子 向 左 浮动 效果 (三 图 5. 12 加 宽 后 的 浮动 效果 
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盒子 变 宽 后 就 会 出 现 一 个 问题 : 这 3 个 盒子 本 应 该 水 平分 布 ,但 是 显示 的 时 候 第 三 
个 盒子 却 在 下 方 。 事实 上 ,它们 的 确 相 邻 , 但 是 由 于 容器 的 宽度 不 足以 在 同一 排 容 纳 3 个 
盒子 ,并且 盒 子 是 浮动 的 ,就 会 造成 第 3 个 盒子 在 下 方 显 示 。 所 以 ,编写 代码 时 要 注意 设 
置 不 同 的 相关 属性 ,如 将 容器 变 大 或 者 将 盒子 调 小 。 
5.2.2 clear 属性 

如 果 和 希望 清除 浮动 对 元 素 的 影响 ,可 以 使 用 clear 属性 。 

clear 属性 有 5 个 可 能 值 : left、right、both、none 和 inherit。clear: left 可 清除 左 浮动 
的 影响 。 同 样 ,clear:right 可 清除 右 浮动 的 影响 。 

对 图 5. 12 所 示 页 面 做 如 下 修改 ,清除 左 浮动 对 p 元 素 的 影响 。 


pt{ 





border:1px dashed black; 
background:pink; 
margin:10px; 

clear:left 


} 
运行 结果 如 图 5. 13 所 示 。 





图 5.13 使 用 clear 属性 的 效果 


5.2.3 项 目 : 3 个 相框 
1. 项 目 说 明 
制作 如 图 5. 14 所 示 3 个 相框 的 CSS 样式 。 





图 5.14 3 个 相框 


HiMLS+cS§S3+Javaseript 丽 同 印 虎 


2. 项 目 设计 


本 项 目 需 要 用 到 浮动 定位 方式 将 相框 横向 排列 ;使 用 边框 .背景 、 内 边 距 、 外 边 距 等 属 


性 定义 相关 样式 。 


首先 定义 一 个 大 盒子 ,设置 背景 色 为 灰色 (grey) ,建议 设置 为 580px 宽 220px 高 ; 然 
后 定义 3 个 小 盒子 ,添加 照片 ,并 且 照 片 背景 为 白色 ( 井 FFF) ,10px 边 界 ,10px 填 充 ; 小 盒 
子 的 边框 为 深 灰色 (#333) 。3 个 小 盒子 都 向 左 浮动 。 


3. 项 目 实施 
本 项 目 代码 如 下 。 
<htm> 
<head> 
<meta charset= "utf- 8"> 
<title>3 个 相框 < /title> 
<style> 
.outter { 
border: lpx solid black; 
background: grey; 
padding: 10px; 
width: 560px; 
height: 220px; 
margin:auto; 
} 
.box { 
border: 8px solid #333; 
background: #FFF; 
margin: 10px; 
padding: 10px; 
float: left; 
3 
</style> 
< /head> 
<body> 


<div class= "outter"> 


<div class= "box"> < img src= "sea.jpg" width="130" height="170"> 


</div> 


<div class= "box"> < img src= "bridge.jpg" width="130" height= "170"> 


</div> 


<div class= "box">< img src= "tower.jpg" width= "130" height= "170"> 


</div> 
</div> 
< /body> 
</html> 
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4. 知识 运用 

制作 如 图 5. 15 所 示 的 智能 家 居 系统 的 CSS 界面 ,其 中 背景 为 #066, 宽 为 320px, 高 
为 250px,padding 为 1px,border 设置 为 1px solid black。 对 每 个 div 进行 设置 : 背景 为 
并 FFF,margin 为 10px,padding 为 10px, 圆 角 半 径 为 20px。 














5.15 智能 家 居 系 统 的 CSS 界面 





53 位 置 定位 


比 起 浮动 定位 ,位 置 定 位 更 加 准确 .具体 、 易 控制 。 
5.3.1 position 属性 

position 属性 可 以 使 元 素 显 示 在 网 页 中 任意 指定 的 位 置 上 。 在 CSS 布局 中 ,position 
发 挥 着 非常 重要 的 作用 ,很 多 容器 的 定位 是 用 position 完成 的 。 

position 属性 有 4 个 可 选 值 ,它们 分 别 是 : static、absolute fixed relative。 下 面 分 别 
介绍 它们 的 不 同 用 法 。 

表 5.2 列 出 了 position 属性 的 值 及 使 用 方法 。 

表 5.2 position 属性 的 值 及 使 用 方法 














值 描 述 
di 生成 绝对 定位 的 元 素 , 相 对 于 static 定位 以 外 的 第 一 个 父 元 素 进行 定位 。 元 素 的 位 置 
BE 通过 left、top、right 以 及 bottom 属性 进行 规定 
a 生成 绝对 定位 的 元 素 , 相 对 于 浏览 器 窗口 进行 定位 
元 素 的 位 置 通过 top、right、bottom 以 及 left 属性 进行 规定 
- 相对 定位 ,对 象 不 可 重 春 ,可 以 通过 top,right、bottom 以 及 left 属性 在 正常 文档 中 偏 移 
relative a 
位 置 
a 这 是 默认 的 属性 值 ,无 特殊 定位 ,对 象 遵循 HTML 定位 规则 。 不 能 通过 z-index 进行 层 
次 分 级 





下 面 分 别 了 解 一 下 position 属性 的 几 个 值 。 


oa 





证 MIS+c6Se+Javaseript 而 


1. 默认 的 属性 值 
无 特殊 定位 ,也 就 是 该 盒子 按照 标准 流 ( 包 括 浮动 方式 ) 进 行 布局 。 
2. 绝对 定位 


盒子 的 位 置 以 它 的 包含 框 为 基准 进行 偏 移 。 绝 对 定位 (absolute) 的 框 从 标准 流 中 脱离 。 
这 意味 着 它们 对 其 后 的 兄弟 盒子 的 定位 没有 影响 ,其 他 盒子 就 好 像 这 个 盒子 不 存在 一 样 。 
例如 ,使 用 的 绝对 定位 语句 如 下 。 
-pos abs{ 
position:absolute; 
left:50px; 
top:80px7 
} 
内 容 设置 为 
< img class= "pos_abs" src= "image/tower.jpg"> 
过 p 二 通过 绝对 定位 ,元 素 可 以 放置 到 页 面 上 的 任何 位 置 二 /p>。 
绝对 定位 使 元 素 可 以 放置 在 页 面 的 任何 位 置 上 ,而 与 其 他 元 素 无 关 。 上 述 语句 的 运 
行 结 果 如 图 5. 16 所 示 。 


© Bre rr 
文件 (篇 缉 (E) ”查看 (V) ”收藏 夹 (A) 工具 (T) ”帮助 (H) 
通过 绝对 定位 ， 元 素 可 以 放置 到 页 面 上 的 任何 位 置 





HTML 





图 5.16 绝对 定位 


该 图 片 位 置 与 页 面 顶 部 的 距离 是 80px, 距 页 面 左 侧 为 50px, 假 如 修改 绝对 定位 的 请 
句 , 将 top:80px 修改 为 top:10px, 结 果 可 能 会 出 现 图 片 遮挡 文字 的 情况 。 
3. 相对 定位 


使 用 相对 定位 (relative) 的 盒子 的 位 置 以 标准 流 的 排版 方式 为 基础 ,然后 使 盒子 相对 
于 它 在 原本 的 标准 位 置 偏 移 指定 的 距离 。 相 对 定位 的 盒子 仍 在 标准 流 中 , 它 后 面 的 盒子 
仍 以 标准 流 方式 对 待 它 。 相 对 定位 的 原理 是 : 如 果 对 一 个 元 素 进行 相对 定位 ,首先 它 将 
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出 现在 它 所 在 的 原始 位 置 上 ,之 后 通过 设置 的 水 平 或 垂直 位 置 将 元 素 相对 于 它 的 原始 起 
点 进行 移动 。 另 外 ,进行 相对 定位 时 ,无 论 是 否 进行 移动 元 素 , 都 占据 原来 的 空间 。 
例如 ,如 下 相对 定位 的 语句 : 





#box relative { 
position: relative; 
left: 20px; 
top: 30px; 

} 

它 的 意思 是 ,生成 的 盒子 与 原来 的 盒子 相 比 在 其 右 下 方 : 向 右 移 动 20px, 向 下 移动 
30px。 绝 对 定位 和 相对 定位 的 区 别 是 ,绝对 定位 的 坐标 原点 为 上 级 元 素 的 原点 ,而 相对 
定位 的 坐标 原点 为 偏 移 前 的 原点 ,与 上 级 元 素 无 关 。 一 般 情况 下 ,绝对 定位 只 用 于 需要 精 
确 控制 内 容 的 情况 ,因为 绝对 定位 要 求 开 发 者 将 元 素 放置 的 位 置 精确 到 某 一 像素 ,而 相对 
定位 在 内 容 如 何 定位 上 的 不 可 预测 性 更 大 。 所 以 ,绝对 定位 更 加 精准 ,相对 定位 在 屏幕 大 
小 改变 时 适应 性 更 强 。 相 对 定位 显示 结果 如 图 5. 17 所 示 。 








图 5.17 相对 定位 


4. 固定 定位 (fixed) 





它 和 绝对 定位 类 似 ,只 是 以 浏览 器 窗口 为 基准 进行 定位 。 固 定 定位 的 容器 不 会 随 着 
滚动 条 的 拖 动 而 变换 位 置 。 
例如 ,如 下 代码 为 固定 定位 的 运用 ,文本 显示 于 浏览 器 的 一 个 固定 位 置 。 


:pos fixed{ 
position:fixed; 
left:50px; 
top:10px; 

} 


内 容 设置 为 


1 ER 


<div class= "pos_fixed"> 固 定 定位 < /div> 





5.3.2 项 目 : 照片 墙 
1. 项 目 说 明 





制作 如 图 5. 18 所 示 的 照片 墙 效果 。 图 5.18 照片 六 效果 
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2. 项目 设计 
(1) 首先 使 用 CSS 设置 每 个 图 片 的 边框 和 边 距 。 


(2) 使 用 位 置 定位 的 绝对 定位 ,搭配 使 用 left、top 进行 定位 。 
使 用 position:absolute 实现 绝对 定位 , 当 父 元 素 非 static 时 ,相对 了 


F 父 元 素 定 位 ,而 





不 受 父 元 素 内 其 他 子 元 素 的 影响 。 因 此 ,设置 容器 大 盒子 的 属性 position:relative, 所 有 
小 盒子 都 相对 于 大 盒子 绝对 定位 ,小 盒子 的 位 置 通 过 left top ,right 以 及 bottom 属性 进 


行规 定 。 


(3) 设置 正确 的 图 片 引 用 路 径 , 如 果 图 片 无 法 正确 显示 , 则 需要 使 用 替换 文字 “该 图 


像 无 法 显示 ,请 查看 文件 路 径 ”。 
3. 项 目 实施 
本 项 目 代 码 如 下 。 


<html> 
<head> 
<title> 照 片 墙 < /title> 
<style> 
.box{position:relative; top:50; left:200;} 
img{position:absolute; 
border:5px solid; 
border- image:url (pic/33.png) 10 10 round; 
padding:10px; 
margin:10px;} 
.Candel {left:410;} 
.fire{left:200; top:120;} 
.Sweet {left:105; top:270;} 
.food{left:515; top:283;} 
.turkey{left:395; top:375;} 
.fruit{left:200; top:375;} 
</style> 
< /head> 
<body> 
<div class= "box"> 


<img class= "candel" src= "pic/ 蜡 烛 .gif" width= "75" height= "94" border= "0" alt=" 


该 图 像 无 法 显示 ,请 查看 文件 路 径 "> 


<img class= "sweet" src= "pic/ 甜 点 .jpg" width= "70" height= "73" border= "0" alt= 


"该 图 像 无 法 显示 ,请 查看 文件 路 径 "> 


<img class= "fire" src= "pic/ 炉 火 .jpg" width= "289" height= "226" border="0" alt=" 


该 图 像 无 法 显示 ,请 查看 文件 路 径 "> 


<img class= "food" src="pic/ 佳 肴 .gif" width="95" 


显示 ,请 查看 文件 路 径 "> 


<img class= "turkey" src= "pic/ 火 鸡 .gif" width= "94" 


boraer= "0" alt- "该 图 像 无 法 


border= "0" alt= "该 图 像 无 法 
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显示 ,请 查看 文件 路 径 "> 
<img class= "fruit" src="pic/ 水 果 .jpg" width="95" border="0" alt=" 该 图 像 无 法 
显示 ,请 查看 文件 路 径 "> 
</div> 
< /body> 
</html> 


4. 知识 运用 


制作 如 图 5. 19 所 示 的 网 页 ,注意 position 的 运用 ,并 且 使 用 float 等 属性 。 





图 5.19 position 的 运用 


54 隐藏 与 显示 


5.4.1 visibility 属性 


visibility 属性 控制 着 元 素 的 显示 与 隐藏 。 如 果 一 个 元 素 的 visibility 属性 设置 为 
hidden, 即 表现 为 不 可 见 的 形式 ,但 是 元 素 不 可 见 并 不 等 于 它 不 存在 , 它 仍旧 会 占据 页 面 
的 部 分 位 置 ,从 而 影响 页 面 的 布局 。 

visibility 的 属性 值 及 用 法 说 明 见 表 5. 3。 

表 5.3 visibility 的 属性 值 及 用 法 说 明 
属 性 描述 
visible “| 默认 值 ,设置 元 素 框 为 可 见 的 
hidden “| 元 素 框 被 隐藏 ,但 仍然 占有 部 分 页 面 位 置 ,仍然 影响 页 面 的 布局 


当 在 表格 元 素 中 使 用 时 ,此 值 可 删除 一 行 或 一 列 , 但 是 它 不 会 影响 表格 的 布局 。 被 行 或 
列 占据 的 空间 会 留 给 其 他 内 容 使 用 。 如 果 此 值 被 用 在 其 他 的 元 素 上 ,就 会 呈现 为 hidden 











collapse 





下 面 将 5. 3. 2 节 中 照片 墙 中 的 火 鸡 图 片 隐藏 ,其 语句 格式 如 下 : 


.turkey{ 
left:395; 
top:375; 
Visibility:hidden; 


HTMLS+CSS3+JavaSeript 顶 目 | 开发 


隐藏 效果 如 图 5. 20 所 示 。 
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图 5.20 隐藏 效果 


虽然 已 经 设置 了 图 片 无 法 显示 时 的 蔡 换文 本 ,但 是 图 5. 20 中 并 没有 替换 文本 ,也 没 
有 显示 火 鸡 的 照片 ,因为 使 用 了 hidden 属性 。 


5.4.2 z-index 属性 


z-index 属性 用 于 设置 元 素 的 堆 释 顺序 。 拥 有 更 高 堆 释 顺序 的 元 素 总 是 会 处 于 堆 释 
顺序 较 低 的 元 素 的 上 面 。 
例如 ,使 用 如 下 语句 ， 


img{ 
position:absolute; 
left :Opx; 
top: Opx; 
z-index:-—1; 

3 


该 语句 的 作用 是 设置 了 元 素 的 堆 释 顺序 ,由 于 z-index 设置 为 一 1, 因 此 它 在 文本 的 后 
面 出 现 ,显示 效果 如 图 5. 21 所 示 。 





查看 结果 : 
a heading 


index 是 -1， 因 此 它 在 文本 的 后 面 出 现 。 














图 5.21 z-index 设置 图 层 效 果 





5.4.3 display 属性 


display 属性 用 于 定义 建立 布局 时 元 素 生成 的 显示 框 类 型 。 
现在 做 如 下 实验 ,首先 建立 一 个 元 素 块 结构 ,其 语句 如 下 所 示 。 


<body> 
<div>Box- 1< /div> 
<div> Box- 2< /div> 
<div>Box- 3< /div> 
< span> Box- 4< /span> 
< span> Box- 5< /span> 
< span> Box- 6< /span> 
<div>Box- 7< /div> 
< span> Box- 8< /span> 
< /body> 


其 显示 效果 如 图 5. 22 所 示 。 
如 果 使 用 display 语句 , 则 代码 如 下 。 


<body> 
<div style= "display:inline">Box- 1< /div> 
<div style= "display:inline"> Box- 2< /div> 
<div style= "display:inline"> Box- 3< /div> 
<span style= "display:block"> Box- 4< /span> 
< span style= "display:block"> Box- 5< /span> 
< span style= "display:block"> Box- 6< /span> 
<div style= "display:none">Box- 7< /div> 
< span style= "display:none"> Box- 8< /span> 
< /body> 


display:inline 是 设置 对 象 作为 行内 元 素 显 示 ,inline 默认 不 自动 产生 换行 元 素 ;这 里 
使 用 的 div 元 素 是 块 级 元 素 , 它 的 display 属性 默认 值 是 block。 本 例 中 将 div 的 display 
设置 为 inline, 就 能 将 多 个 div 显示 成 span 的 效果 ,其 显示 效果 如 图 5. 23 所 示 。 





Box-1 

Box-2 

Box-3 Box-1 Box-2 Box-3 
Box-4 Box-5 Box-6 Box-4 

Box-7 Box-5 

Box-8 Box-6 

图 5.22 元 素 块 结构 图 5.23 display 显示 效果 


5.4.4 项 目 : 悬浮 菜单 
1. 项目 说 明 
设计 如 图 5. 24 所 示 的 选项 表 。 





而 ML5+clss+Javastript 昼 四 用 同 








5.24 隐藏 和 显示 


要 求 : 鼠标 在 选项 表 上 方 悬 浮 时 ,项 目 一 和 项 目 二 显示 ;鼠标 离开 后 ,项 目 一 和 项 目 
二 隐藏 。 


2. 项 目 设计 


本 项 目的 触发 事件 是 鼠标 甚 浮 , 当 鼠标 放置 在 “选项 表 ” 上 方 ,“ 项 目 一 "和 “项 目 二 ”由 
隐藏 转 为 显示 , 当 鼠 标 离 开 “ 项 目 表 ”,“ 项 目 一 "和 “项 目 二 ”由 显示 转 为 隐藏 。 

可 以 使 用 伪 元 素 选择 符 :hover 判断 鼠标 的 悬浮 事件 ,元 素 的 隐藏 和 显示 使 用 display 
属性 完成 。 当 列表 项 隐藏 时 ,display 为 none; 当 列 表 显 示 时 ,display 为 block 。 


3. 项 目 实施 
本 项 目 代码 如 下 。 


<html> 
<head> 
<title> 显 示 与 隐藏 < /title> 
<meta charset= "utf- 8"> 
<style> 
li{ 
list- style:none; 
border: lpx groove; 
position:relative; 
margin:0; 
padding:0; 
width:185px; 
3 
#nav ulf{ 
display:none; 
margin:0; 
padding:0; 
width:185px; 
position:absolute; 
top:20px; left:0; 
} 
/* 下 拉 */ 
#nav li:hover>ul{ 
display:block; 
} 





</style> 
</head> 
<body> 
<ul id= "nav"> 
<1i> 选 项 表 
<ul> 
<1i> 项 目 一 </1i> 
<1i> 项 目 二 </1i> 
</ul> 
</1i> 
</u> 
< /body> 
< /html> 


4. 知识 运用 


利用 鼠标 悬浮 事件 和 display 属性 完成 如 图 5. 25 所 示 三 级 下 拉 菜 单 的 制作 。 


2 级 分 类 


?级 分 类 
?级 分 类 


5.25 三 级 下 拉 菜 单 


55 咖啡 商城 一 一 商品 分 类 模块 美化 效果 实现 


本 项 目 利用 本 章 学 习 的 CSS 的 盒子 模型 的 属性 对 综合 项 目 首页 的 “全 部 商品 分 类 ” 


(1) 使 用 文本 字体 等 属性 设置 文字 效果 。 
(2) 对 盒子 模型 的 宽度 、 高 度 、 边 距 等 属性 进行 设置 。 


(3) 布局 的 设置 ,实现 将 主要 页 面 分 割 成 几 个 大 块 ,使 用 浮动 效果 对 左 侧 块 进行 美 
化 ,读者 可 以 在 完成 本 项 目 内 容 之 后 尝试 对 中 间 和 右 侧 块 进行 美化 。 


5.5.1 项 目 说 明 


第 2 章 中 实现 了 咖啡 商城 一 一 商品 分 类 模块 的 HTML 部 分 ,下 面 使 用 CSS 对 它 进 


行 美化 。 
“全 部 商品 分 类 美化 ”显示 结果 如 图 5. 26 所 示 。 


css 褒 印 痪 因 













而 ML5+c6ss+Javastript 画 同 而 多 
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图 5.26 全 部 商品 分 类 美化 显示 效果 


5.5.2 项 目 设计 


(1) 在 设计 阶段 就 要 对 页 面 的 整体 布局 有 全 面 的 考虑 ,并 逐步 加 以 实现 。 

首先 定义 一 个 ID 选择 符 main, 并 依据 页 面 大 小 对 该 选择 符 设置 合适 的 宽度 ,之 后 将 
该 宽度 分 割 成 左 、 中 、 右 3 块 。 本 项 目 中 选择 左 侧 块 放置 全 部 商品 名 称 部 分 ,同时 使 用 浮 
动 效 果 将 3 块 放置 到 同一 排 ,最 后 使 用 clear 清除 浮动 效果 。 

(2) 合理 使 用 盒子 模型 相关 属性 。 

为 了 使 文字 在 页 面 中 有 良好 的 交互 效果 ,需要 选择 使 用 合适 的 宽度 ,灵活 使 用 盒子 模 
型 的 相关 属性 ,并 与 文本 字体 属性 配合 使 用 。 


s.5.3 ”项目 实施 
本 项 目 代 码 如 下 。 


< !doctype html> 

<html> 

<head> 

<meta charset= "utf- 8"> 

<title> Insert title here< /title> 
<style type= "text/css"> 


#main { 


EO (SPR@ 


width: 1210px; 
margin: 0 auto; 
} ”/* 设 置 总 体 宽度 及 边 距 */ 
#main .left { 
float: left; 
width: 230px; 
} ”/* 设 置 块 的 宽度 及 向 左 浮动 效果 * / 
-module common { 
padding: 5px; 
border- left: 2px solid #895707; 
border- bottom: 2px solid #895707; 
border- right: 2px solid #895707; 
overflow: hidden; 
margin- bottom: 10px; 
clear: both; 
} ”/* 设 置 边框 属性 、 边 距 及 内 容 洲 出 时 的 效果 * / 
.assort wrap { 
width: 210px; 
overflow: hidden; 
] /x* 设 置 宽度 及 内 容 溢 出 时 会 被 修剪 * / 
-assort wrap dt { 
font- size: 14px; 
line- height: 20px; 
margin: Spx; 
} ”/* 设 置 字号 , 行 高 . 边 距 */ 
.assort wrap dt a{ 
padding- left: 5px; 
line- height: 20px; 
font— weight: bold; 
Color: #895707; 
text- decoration: none; 
} ”/* 设 置 边 距 ,\ 行 高 .字体 粗细 、 颜 色 \ 修 饰 等 属性 x / 
.assort wrap dt a:hover { 
text- decoration: none; 
Color: #f£60; 
} ”/* 设 置 鼠 标 指针 悬浮 时 字体 颜色 改变 * / 
-assort wrap dd { 
width: 200px; 
line- height: 20px; 
overflow: hidden; 
color: #a6a6a6; 
word- spacing: 4px; 
padding: Opx; 


硬 ML5+clss+Javastript 昼 四 用 风 


} 
.assort wrap dda{ 
Color: #444; 
text- decoration: none; 
} 
-assort wrap dd a:hover { 
text- decoration: none; 
Color: #£60; 
} 
</style> 
</head> 
<body> 
<div id= "main"> 
<div class="left"> 
<div class= "module common"> 
<div class="assort wrap"> 
<h2> 全 部 商品 分 类 < /h2> 
<dl> 
<dl> 
<dt> 
<a href="> 白 咖啡 < /a> 
</dt> 
<dd> 
<a href=""> 大 马 白 咖啡 </a> |<a href=""> 白 咖啡 < /a> 
</dd> 
</dl> 
<dl> 
<dt> 
<a href= ""> 咖 啡 < /a> 
</dt> 
<dd> 
<a href=""> 咖 啡 豆 < /a> |<a href=""> 咖 罪 生 豆 </a> 1|<a href="> 有 机 咖啡 
</a> 1<ahref="> 咖 啡 胶 吉 < /a> 


</dd> 
</dl> 
<br> 
<br> 
<dl> 
<dt> 
<a href= "> 咖啡 杯 / 杯 类 < /a> 
</at> 
</dl> 
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<dl> 
<dt> 
<a href=""> 咖 啡 机 零件 < /a> 
</adt> 
<dd> 
<ahref=-""> 咖 啡 机 清洁 粉 < /a> 
</dd> 
</dl> 
<dl> 
<dt> 
<a href-""> 咖 啡 厅 相 关 设 备 < /a> 
</dt> 
</dl> 
</div> 
</div> 
</div> 
</div> 
< /body> 
</htm> 


习 题 


一 、 选 择 题 


Li € ) 显 示 了 这 样 一 个 边框 : 上 边框 10 像素 .下 边框 5 像素 、 左 边框 20 像素 \ 布 
边框 1 像素 。 
A. border-width:10px 5px 20px 1px 
B. border-width:10px 20px 5px 1px 
C. border-width:5px 20px 10px 1px 
D. border-width:10px lpx 5px 20px 
2. CSS 中 的 BOX 的 padding 不 包括 的 属性 是 和 


A. 填充 B. 上 填充 C. 底 填充 D. 左 填充 
3. CSS 中 ,盒子 模型 的 属性 不 包括 ( )。 

A. font B. margin C. padding D. visibility 
4. ( ，) 是 合法 的 类 样式 。 

A. . Word B. #Word & 2 D. #A2 
5. CSS 利用 ( ) 标 签 构建 网 页 布局 。 

A. =dir> B. <div> < D. =dif> 
6. 在 CSS 语言 中 ,( ”) 是 左边 框 的 语法 。 

A. border-left-width: 二 值守 B. border-top-width: 二 值 二 


HiMLS+cS§S3+Javaseript 丽 同 印 虎 


C. border-width-left: 一 值 过 D. border-top-width: 一 值 过 
7. 以 下 关于 CSS 十 DIV 布局 中 盒子 模型 的 说 法 错误 的 是 ( » 
A. 一 个 盒子 由 4 个 独立 的 部 分 组 成 : Margin、Border、Padding、Content 
B. 填充 ,边框 ,边界 和 内 容 区 域 都 分 为 上 .下 \ 左 \ 右 4 个 方向 , 既 可 以 分 别 定义 ， 
也 可 以 统一 定义 























C. 盒子 的 实际 宽度 一 左 边界 十 左边 框 十 左 填充 十 内 容 宽度 (width) 十 右 填 充 
右边 框 十 右边 界 
D. 盒子 的 实际 高 度 二 上 边界 十 上 边框 十 上 填充 十 内 容 高 度 (height) 十 下 填充 
下 边框 十 下 边界 
8 < ) 属 性 能 够 设置 盒子 模型 的 左 侧 外 边界 。 
A. margin : B. indent : C. margin-left: D. text-indent: 


9. 下 列 样式 定义 字体 为 宋体 、 字 体 颜 色 为 红色 斜体 、 字 号 为 20px、 粗 细 为 800 号 , 正 
确 的 定义 是 ( 
A. p{font-family: 宋 体 ;font-size:20px;font-weight:800;color:red; font-style: 
italic;} 
B. p{font-family:20px;font-size: 宋 体 ;font-weight:800; color: red;font-style: 
italic;} 
C. p{font-family: 20px; font-size: 800; font-weight: 宋体 ; color: red; font-style: 
italic;} 
D. pl{font-family: 800; font-size: 20px; font-weight: red; color: italic; font-style: 
宋体 ;} 
10. 下 列 样式 定义 字体 间距 为 0. 5 倍 间距 、 水 平 左 对 齐 .垂直 顶端 对 齐 ` 有 下 夯 线 , 正 
确 的 定义 是 (  )。 
A. p{text-decoration:underline;letter-spacing: 0. 5em;vertical-align: top;text- 
align: left;} 
B. p{text-decoration:0. 5em;letter-spacing: underline; vertical-align: top;text- 
align: left;} 
C. pl{text-decoration: left; letter-spacing: top; vertical-align: 0. 5em; text- 
align: underline;} 
D. pf{text-decoration:underline;letter-spacing: 0. 5em;vertical-align: left;text- 
align: top;} 
11. 在 CSS 中 ,为 页 面 中 的 某 个 DIV 标签 设置 样式 div{ width:200px; padding:0 
20px; border:5px;) , 则 该 标签 的 实际 宽度 为 ( )s 


A. 200px B. 220px C. 240px D. 250px 
12. 边框 的 样式 不 包含 的 值 包括 ( 汉 
A. 粗细 B. 颜色 C. 样式 也 :长短 


13. 阅读 下 面 HTML 代码 ,两 个 DIV 之 间 的 空白 距离 是 ( Ns 


<style type= "text/css"> 


110 


14. 


16. 


MW 


18. 


19. 


20. 
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-header {margin- bottom: 10px; border:1px solid #£00; } 
-Container {margin- top: 15px; border:1px solid #£00; } 
</style> 


<div class= "header">< /div> 


<div class="container">< /div> 


A. 0px B. l0px GC. 15px D. 25p 

关于 块 状元 素 的 说 法 ,错误 的 是 ( ) 。 

A. 块 状元 素 在 网 页 中 是 以 块 的 形式 显示 ,所 谓 块 状 就 是 元 素 显 示 为 矩形 区 域 ， 
常用 的 块 状元 素 包 括 div \ hl-h6\ PN ul 

B. 默认 情况 下 , 块 状元 素 都 会 占据 一 行 , 通 俗 地 说 ,两 个 相 邻 块 状元 素 不 会 出 现 
并 列 显示 的 现象 ;默认 情况 下 , 块 状元 素 会 按 顺 序 自 上 而 下 排列 

C. 块 状元 素 都 不 可 以 定义 自己 的 宽度 和 高 度 

D. 块 状元 素 一 般 都 作为 其 他 元 素 的 容器 , 它 可 以 容纳 其 他 内 联 元 素 和 其 他 块 状 
元 素 ,我 们 可 以 把 这 种 容器 比喻 为 一 个 盒子 





. 属性 值 ( ) 不 属于 Float 属性 。 


A. left B. center C. right D. none 
下 列 有 关 样 式 表 的 说 法 ,正确 的 是 ( Ys 

A. 通过 样式 表 , 用 户 可 以 使 用 自己 的 设置 覆盖 浏览 器 的 常规 设置 
B. 样式 表 不 能 重用 

C. 每 个 样式 表 只 能 链接 到 一 个 文档 

D. 一 个 页 面 只 能 引入 一 个 外 部 样式 来 

下 面 选项 中 ,( ) 可 以 设置 网 页 中 某 个 标签 的 左边 界 为 5px。 
A. margin:0 5px; B. margin:5px 0 0 0; 
C. margin:0 0 5 Opx; D. padding-left:5px; 
下 面 关 于 外 部 样式 表 的 说 法 ,正确 的 是 ( 网 

A. 文件 扩展 名 为 . css 

B. 外 部 样式 表 内 容 以 二 style 二 标签 开始 ,以 二 /style 二 标签 结束 
C. CSS 属性 值 不 可 以 包含 汉字 

D. 使 用 外 部 样式 表 不 能 使 网 站 风格 保持 统一 

以 下 关于 CLASS 和 ID 的 说 法 不 正确 的 是 ( Ws 

A. class 的 定义 方法 : .类 名 {样式 ); 

B. id 的 应 用 方法 : 二 指定 标签 id 一 "id 名 "二 

C. class 的 应 用 方法 : 二 指定 标签 class 一 “类 名 ”二 

D. id 和 class 只 是 在 写法 上 有 区 别 , 在 应 用 和 意义 上 没有 区 别 
关于 CSS 样式 表 功 能 ,以 下 说 法 不 正确 的 是 ( js 

A. 灵活 控制 网 页 中 的 文字 大 小 、 字 体 、 颜 色 、 间 距 风 格 及 位 置 
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B. 可 以 精确 地 控制 网 页 中 各 元 素 的 位 置 
C. 可 以 与 脚本 语言 相 结合 
D. 以 上 说 法 都 不 对 
二 、 综 合 题 
1. 制作 如 下 要 求 的 页 面 效果 : 页 面 由 boxl\box2\box3\box4 四 个 盒子 组 成 ,1、2、3 
号 盒子 在 一 行 ,4 号 盒子 在 2 号 盒子 的 正 下 方 ,每 个 盒子 的 宽 均 为 400px, 高 均 为 200px， 
5px 边框 黑色 ,盒子 间距 为 10px。 


2. 使 用 盒子 模型 实现 如 图 5. 27 所 示 的 效果 ,要 求 : margin-top: 30px;margin-right: 
50px;margin-bottom: 30px;margin-left: 50px;padding: 20px。 





图 5.27 示例 页 面 1 


3. 使 用 盒子 模型 进行 图 片 排版 ,实现 如 图 5. 28 所 示 的 效果 。 





图 5.28 示例 页 面 2 


本 章 概述 

本 章 介 绍 Transition 和 Animation ,它们 均 可 以 通过 改变 CSS 中 的 属性 值 产 生动 画 
效果 。 通 过 本 章 的 学 习 , 学 生 需 要 掌握 Animation 制作 简单 动画 ,使 用 Transition 实现 从 
一 个 属性 值 过 渡 到 另 一 个 属性 值 的 方法 。 完 成 这 一 系列 的 学 习 后 ,就 能 够 实现 页 面 切 换 
效果 的 综合 实战 。 

学 习 重点 与 难点 

重点 ， 

(1) Animation 动画 。 

(2) Transition 过 渡 。 

难点 : 

(1) 使 用 @keyframes 定义 动画 关键 帧 。 

(2) Transition 结合 其 他 属性 实现 动画 过 渡 效 果 。 

重点 及 难点 学 习 指导 建议 : 

。 难点 在 于 定义 动画 关键 帧 @keyframes, 需 要 理解 关键 帧 的 含义 并 在 编码 实践 时 

认真 体会 其 作用 。 
。 熟练 掌握 使 用 Transition 与 其 他 属性 结合 实现 丰富 多 彩 的 动画 过 渡 效 果 。 
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61 Animation 动 画 
Animation 即 动画 ,我 们 能 够 通过 创建 Animation 动画 取代 动画 图 片 、Flash 动画 以 


及 JavaScript。 使 用 CSS3 Animation 制作 动画 ,只 需要 定义 几 个 关键 帧 ,就 可 以 生成 连 
续 的 动画 。 


6.1.1 定义 关键 帧 


在 CSS 中 , 当 需 要 创建 动画 时 ,首先 要 了 解 @keyframes 属性 。 

@keyframes 属性 规定 了 动画 的 关键 帧 ,关键 帧 定义 了 元 素 在 各 个 时 间 点 的 样式 。 

使 用 百分比 表示 时 间 点 ,0 是 动画 开始 的 时 间 ,100% 是 动画 完成 的 时 间 , 中 间 的 过 
渡 点 可 以 选取 25%、50%、80% 等 ,也 可 以 用 “from” 表 示 开 始 时 间 , 用 “to” 表 示 结 束 时 间 。 


如 图 6. 1 所 示 。 





起 点 终点 
oO% mm S50% GE 100% 
From To 





图 6.1 关键 帧 的 时 间 点 


例如 : 


@ keyframes myfirst{ 
from {background: red;} 
to {background: yellow;} 
} 


这 段 语句 的 作用 是 定义 关键 帧 。 使 用 @ keyframes 属性 定义 关键 帧 ,动画 名 称 为 
myfirst, 第 一 帧 背景 为 红色 ,第 二 帧 背景 变 为 黄色 。 
例如 : 





@ keyframes mymove { 
0% {background: red;} 
25% {background: yellow;} 
50% {background: blue;} 
100% {background: green;} 
3 


在 本 例 中 ,定义 动画 名 称 为 mymove, 开 始 时 背景 色 为 红色 ,当时 间 为 25% 时 ,背景 为 
黄色 ,时 间 为 50% 时 背景 过 渡 为 蓝 色 , 当 动画 100% 完 成 时 ,背景 变化 为 绿色 。 
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如 下 代码 可 以 实现 同时 改变 对 象 的 背景 色 和 位 置 。 同 以 往 学 习 的 CSS 属性 写法 一 
样 ,以 此 类 推 , 就 可 以 写 出 更 多 的 属性 变化 。 


@ keyframes myfirst { 
0% {background: red; left:0px; top:0px;} 
25% {background: yellow; left:200px; top:0px;} 
50% {background: blue; left:200px; top:200px;} 
75% {background: green; left:0px; top:200px;} 
100% {background: red; left:0px; top:0px;} 


6.1.2 绑 定 动画 


在 @keyframes 中 创建 动画 后 ,必须 把 它 捆绑 到 某 个 元 素 或 者 选择 器 上 ,否则 不 会 产 
生动 画 效果 。 

使 用 Animation 对 动画 进行 捆绑 ,同时 需要 规定 以 下 两 项 动画 属性 : 动画 名 称 、 动 画 
时 长 。 

例如 ,页 面 上 有 一 个 div 元 素 , 可 以 把 myfirst 动画 拥 绑 到 该 元 素 上 ,并 且 定 义 动画 时 
长 为 5 秒 。 写 法 如 下 所 示 。 


< Style> 
@ keyframes myfirst { 
0% {background: red; left:0px; top:O0px;} 
25% {background: yellow; left:200px; top:Opx;} 
50% {background: blue; left:200px; top:200px;} 
75% {background: green; left:0px; top:200px;} 
100% {background: red; left:0px; top:0px;} 


div { width:150px; 
height:50px; 
position:absolute; 


animation: myfirst 5s; } 


</style> 
需要 注意 ,必须 定义 动画 的 名 称 和 时 长 。 如 果 忽 略 时 长 , 则 动画 不 会 动 ,因为 其 默认 
值 是 0。 


Internet Explorer 10、Firefox 以 及 Opera 支持 @keyframes 规则 和 animation 属性 。 
Chrome 和 Safari 需要 前 级 -webkit-。Internet Explorer 9 以 及 更 时 的 版 本 不 支持 
@keyframes 规则 或 animation 属性 。 

CSS3 所 有 与 动画 相关 的 属性 见 表 6. 1。 
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表 6.1 CSS3 所 有 与 动画 相关 的 属性 



































属 性 描 述 
@keyframes 规定 动画 
animation 所 有 动画 属性 的 简写 属性 ,除了 animation-play-state 属性 
animation-name 规定 @keyframes 动画 的 名 称 
animation-duration 规定 动画 完成 一 个 周期 所 花费 的 秒 或 毫秒 ,默认 是 0 
animation-timing-function 规定 动画 的 速度 曲线 ,默认 是 ease 
animation-delay 规定 动画 何 时 开始 ,默认 是 0 
animation-iteration-count 规定 动画 被 播放 的 次 数 , 默 认 是 1 
animation-direction 规定 动画 是 否 在 下 一 周期 逆向 播放 ,默认 是 normal 
animation-play-state 规定 动画 是 否 正在 运行 或 暂停 ,默认 是 running 
animation-fill-mode 规定 对 象 动 画 时 间 之 外 的 状态 


6.1.3 项 目 : 跑 动 的 汽车 
1. 项 目 说 明 


如 图 6.2 所 示 , 使 用 CSS 样式 制作 跑 动 的 汽车 效果 ,要 求实 现 汽 车 沿 着 路 线 循环 运 
动 的 动画 效果 。 


2. 项 目 设计 


这 里 使 用 CSS 的 animation 属性 实现 动 
画 效果 。 

(1) 首先 使 用 道路 图 片 作为 页 面 背景 , 汽 
车 放置 于 道路 上 。 

(2) 制作 汽车 的 跑 动 动画 ,定义 动画 需要 
使 用 @keyframes 属性 ,定义 动画 的 5 帧 动作 ， 
即 定义 在 每 个 时 间 点 上 的 样式 。 

(3) 选中 汽车 ,并 绑 定 动画 属性 。 使 用 animation 属性 把 动画 绑 定 在 对 象 上 ,并 且 定 
义 动画 的 名 称 和 时 长 。 


3. 项 目 实施 


下 面 制 作 跑 动 的 汽车 这 个 案例 。 
(1) 首先 制作 案例 中 的 汽车 和 道路 ,代码 如 下 所 示 。 


<html> 








图 6.2 跑 动 的 汽车 


<head> 


<meta charset="utf- 8"> 
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<style> 
body { 

background: url (path .png)no- repeat; 
. 


-Car { 
width: 150px; 
height: 140px; 


position: relative; 

上 

</style> 
< /head> 
<body> 

< img src="car.png" class= "car"> 
< /body> 
</htm> 


(2) 接 下 来 定义 动画 。 要 定义 汽车 跑 动 的 动画 ,从 起 点 出 发 ,经 过 3 个 拐点 ,再 回 到 
起 点 ,一 共有 5 个 关键 帧 。 


@ keyframes mymove{ 
0% {left:30px; top:0px;} 
25% {left:600px; top:0px;} 
50% {left:600px; top:330px;} 
75% {left:30px; top:330px;} 
100% {left:30px; top:Opx;} 







} 
(3) 为 了 兼容 不 同 的 浏览 器 ,再 写 一 个 带 -webkit- 前 级 的 @keyframes。 


Q@- webkit- keyframes mymove{ 
0% {left:30px; top:0px;} 
25% {left:600px; top:0px;} 
50% {left:600px; top:330px;} 
75% {left:30px; top:330px;} 
100% {left:30px; top:Opx;} 

} 


(4) 把 动画 绑 定 到 汽车 对 象 。 使 用 animation 属性 ,指定 动画 名 称 mymove, 动 画 时 
长 5 秒 ,infinite 表示 无 限 次 循环 。 


.car{ 
width:150px; 
height:140px; 
position:relative; 
animation:mymove 5s infinite 7 
一 webkit- animation:mymove 5s infinite; /* Safari and Chrome */ 
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4. 知识 运用 


如 图 6. 3 所 示 ,为 Animation 动画 设置 CSS 样式 : 要 求 起 始 方 框 背景 为 红色 并 向 右 
运动 ,达到 右边 框 时 背景 变 为 黄色 并 向 下 运动 ,达到 下 边框 时 背景 变 为 绿色 并 向 左 运动 ， 
达到 左边 框 时 背景 变 为 紫色 并 向 上 运动 ,达到 上 边框 时 背景 变 为 红色 并 开始 向 右 运 动 , 动 
画 一 直 如 此 往复 。 





图 6.3 ”Animation 动画 效果 示意 图 
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6.2.1 Transition 过 渡 


Transition 是 一 种 过 渡 , 它 控制 元 素 从 一 种 样式 转变 为 男 一 种 样式 的 效果 。 为 了 实 
现 这 一 点 ,必须 规定 两 项 内 容 。 
(1) 哪个 CSS 属性 发 生变 化 。 
(2) 规定 效果 的 时 长 。 
例如 ,有 一 个 div 元素 ,原来 的 宽度 是 100px, 当 鼠 标 悬 浮 时 宽度 变 为 300px。 语 句 
如 下 。 
divt{ 
width:100px; 
height:100px; 
background:red; 
} 
div:hover{ 
width:300px; 
} 
当 鼠 标 悬 停 在 div 上 ,这 个 div 的 宽度 会 发 生变 化 ,鼠标 离 去 后 恢复 原状 ,如 图 6. 4 
所 示 。 
但 是 ,这 个 动画 没有 过 渡 效 果 , 宽 度 突然 发 生变 化 会 显得 生硬 。 下 面 我 们 加 上 过 渡 效 
果 , 只 要 在 div 元素 上 加 入 语句 transition: width 2s; 这 句 话 就 表示 发 生 过 渡 变 化 的 属性 
是 宽度 width ,动画 时 长 为 2 秒 。 代 码 如 下 所 示 。 
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图 : 


悬 停 前 悬 停 后 
图 6.4 县 停 显 示 效果 示意 图 


divt{ 
width:100px; 
height:100px; 
background:red; 
transition:width 2s; 

} 

div:hover{ 
width:300px; 

3 


代码 运行 的 效果 是 : 当 鼠 标 悬 停 在 div 上 ,div 的 宽度 由 100 变 成 300, 这 个 变化 在 2 
秒 内 完成 ,可 以 看 到 过 渡 动 画 的 效果 。 
当 过 渡 需 要 同时 设置 多 个 属性 时 ,各 个 属性 之 间 由 逗号 隔 开 ,代码 如 下 所 示 。 
div{ 
width:100px; 
height:100px; 
background:red; 
transition:width 2s,height 2s; 
} 
div:hover{ 
width:300px; 
height:300px; 
} 


可 以 用 all 代表 所 有 变化 的 属性 , 即 “transition: width 2s, height 2s;” 可 以 改写 为 
“transition:all 2s;”。 

Internet Explorer 10、Firefox、Chrome 以 及 Opera 支持 transition 属性 。Safari 需 
要 前 级 -webkit-。Internet Explorer 9 以 及 更 早 的 版 本 不 支持 transition 属性 。Chrome 
25 以 及 更 早 的 版 本 需要 前 级 -webkit-。 


6.2.2 项 目 : 页 面 切换 效果 

1. 项 目 说 明 

本 项 目 要 求 制作 一 个 有 切换 效果 的 页 面 。 它 包括 4 个 版 块 ,第 一 个 版 块 为 “作者 简 
介 ”, 第 二 个 版 块 为 “作品 展示 ”, 第 三 个 版 块 为 “作者 生平 ”, 第 四 个 版 块 为 “联系 我 们 ”。 通 
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过 单 击 导航 栏 进行 版 块 的 切换 ,使 当前 版 块 从 左 至 右 进入 页 面 ,如 图 6. 5 所 示 。 
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6.5 页 面 效果 


2. 项 目 设计 


(1) 首先 要 明确 “作者 简介 ”版 块 是 始终 不 动 的 ,其 他 3 个 版 块 由 左 侧 进入 并 覆盖 其 
上 。 一 共有 3 个 活动 的 版 块 ,开始 时 它们 隐藏 于 页 面 的 左 外 侧 , 通 过 margin-left:-102% 
设置 。 

(2) 给 3 个 活动 版 块 统一 添加 class 二 "panel" ,给 4 个 版 块 的 内 容 部 分 统一 添加 class 一 
"content"。 

(3) 这 个 项 目的 关键 是 实现 过 渡 效 果 的 动画 ,动画 的 触发 事件 是 单 击 导 航 栏 上 的 超 
链接 ,而 超 链 接 指向 的 目标 由 伪 元 素 选 择 符 : target 表示 ,:target 选择 符 可 用 于 选取 当前 
活动 的 目标 元 素 。 

(4) 当 单 击 导 航 栏 中 的 超 链 接 时 ,被 命中 的 版 块 margin-left 属性 发 生变 化 ,由 
margin-left:-102% 变 为 margin-left:0% ,从 而 使 版 块 进入 页 面 。 利 用 transition 属性 定 
义 变化 发 生 的 时 长 ,使 变化 逐渐 完成 ,产生 从 左 向 右 的 过 渡 动 画 。 未 被 选中 的 版 块 自动 退 
回 到 左 外 侧 ,通过 margin-left:-102% 设 置 实现 。 


3. 项 目 实施 
项 目 代码 如 下 所 示 。 


< !DOCTYPE html> 
<head> 
<meta charset= "UTF- 8" /> 
<title>css3 页 面 切换 效果 < /title> 


gg® cs 


<style> 
/* 实现 内 容 块 的 布局 * / 
-Content { 
width: 73$%; 
height: 98%; 
box- shadow: 4px - 4px 4px rgba(0, 0, 0, 0.5); 
background- color: #ble5837 
Position: absolute; 
left: 280px; 
top: 20px; 
} 
/* 导航 栏 位 置 * / 
#header { 
position: absolute; 
top: 50px; 
z-index: 2000; 
width: 235px; 
height: 500px; 
background- color: pink; 
} 
/* 页 面 切换 动画 * / 
.panel { 
width: 100%; 
height: 100%; 
background- color: white; 
position: absolute; 
margin- left: ~- 102%; 
z-index: 2; 
transition: all .6s ease- in- out; 
} 
.panel:target { 
margin- left: 0%; 
} 
</style> 
</head> 
<body> 
<div id= "home" class= "content"> 
<h2> 作 者 简介 < /h2> 
</div> 
<div id= "portfolio" class= "panel"> 
<div class= "content"> 
<h2> 作 品 展示 < /h2> 
</div> 
</div> 
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<div id- "about" class= "panel"> 
<div class= "content"> 
<h2> 作 者 生平 < /h2> 
</div> 
</div> 
<div id= "contact" class="panel"> 
<div class= "content"> 
<h2> 联 系 我 们 < /h2> 
</div> 
</div> 
<div id= "header"> 
<hl> 导 航 栏 < /hl> 
<ul idq= "navigation"> 
<1i><a href="#home"> 作 者 简介 < /a></1i> 
<1li><a href="#portfolio"> 作 品 展示 < /a>< /li> 
<1i><a href="#about"> 作 者 生平 < /a></1i> 
<1i><a href="#contact"> 联 系 我 们 < /a>< /1i> 
</ul> 
</div> 
< /body> 
</htm> 


4. 知识 运用 
制作 伸缩 菜单 栏 , 当 鼠 标 悬 浮 时 选项 拉 伸 , 当 鼠 标 离 开 后 选项 收缩 ,如 图 6.6 所 示 。 


日 ”Brn 


图 6.6 伸缩 菜单 栏 
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本 项 目 要 利用 本 章 学 习 的 CSS 属性 实现 综合 项 目 首页 中 的 “商品 介绍 ”区 域 文字 的 
显示 /隐藏 效果 。 

(1) 使 用 CSS 伪 元 素 选择 符 响应 鼠标 悬浮 行为 。 

(2) 改变 CSS 的 display 属性 值 达到 文字 显示 /隐藏 效果 。 

(3) 使 用 transition 属性 设置 文字 显示 /隐藏 的 动画 过 渡 效 果 。 


6.3.1 项 目 说 明 
在 咖啡 销售 网 站 的 首页 面 展 示 商 品 的 价格 和 销量 的 同时 ,还 需要 有 关 了 





了 


Tn 


商品 的 介绍 ， 





| 
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但 是 版 面 空间 有 限 ,如果 文本 的 内 容 太 多 ,会 显得 布局 狭窄 ,不 利于 阅读 和 观赏 ,因此 适当 
地 隐藏 文字 是 一 种 流行 的 做 法 。 合 理 的 做 法 是 把 
商品 介绍 隐藏 起 来 , 当 客 户 把 鼠标 放置 在 该 商品 
上 时 , 才 显 示 此 商品 的 介绍 文字 。 

商品 介绍 的 运行 结果 如 图 6.7 所 示 。 

当 鼠 标 置 于 某 一 商品 图 片上 时 ,会 有 两 个 兰 4s9 

已 售 出 #598 件 

变化 : 

(1) 图 片 边框 由 黑色 变 为 红色 。 图 6.7 综合 项 目 

(2) 商品 介绍 文字 由 隐藏 变 为 显示 。 


6.3.2 项 目 设 计 

(1) CSS 响应 鼠标 悬浮 是 通过 伪 元 素 选 择 符 :hover 实现 的 。 可 以 通过 设置 :hover 
的 属性 变化 达到 目的 。 

可 用 来 产生 隐藏 /显示 变化 的 属性 有 很 多 ,如 display ,visibility .margin-left 等 ,本 项 
目 中 将 使 用 z-index 属性 ,通过 改变 图 层 隐 藏 或 显示 文字 。 

(2) z-index 能 够 直接 改变 图 层 , 但 是 还 需要 加 入 过 渡 效果 ,通过 transition 属性 设置 
过 渡 时 长 ,才能 使 文字 图 层 的 出 现 不 会 太 突 匹 ,而 是 呈现 一 个 逐渐 浮现 的 动画 。 
6.3.3 项 目 实施 

本 项 目 代 码 如 下 。 
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商品 介绍 


< !DOCTYPE html> 
<html> 
<head> 
<title>transition 示 例 < /title> 
<meta charset= "utf- 8"> 
<style> 
ue={ 
float: left; 
padding: 5px; 
margin: 5px; 
} 
.que-pP { 
color: red 


3 


qe-=s1 
Color: gray; 
font- size: 12 
} 
-que-m{ 
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Position: relative 
} 
-que-uf{ 
background: white; 
height: 50px; 
3 
img { 
width: 120px; 
height: 120px; 
border: lpx groove; 
border- color: gray; 
} 
img:hover { 
border- color: red 
} 
pi 
position: absolute; 
left: 0; 
top: 120px; 
width: 120px; 
height: 50px; 
z-index: -23 
opacity: 0.8; 
background: #000; 
Color: #fff; 
font- size: 13px; 
overflow: hidden; 
margin: 07 
transition: z-index 0.5s 
} 
div:hover { 
z-index: 2 
， 
</style> 
</head> 
<body> 
<div id="queue"> 
<div class="que- i"> 
<div class="que-m"> 
<a href—"#"><img src="small 201312170756477562.jpg" 
align= "absmiddle">< /a> 
<p> 进 口 特价 2 盒 全 国 包 邮 马来西亚 旧 街 场 3 合 1 经 典 原味 速溶 白 咖啡 640g</ 
p> 
</div> 
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<div class= "due-unr> 
<span class="que-p"> ¥ < span> 41.99< /span> 
</span><br><span class= "que- s"> 已 售 出 <em> 4598< /em> 件 
</span> 

</div> 
</div><!--end of queue- -> 
< /body> 
</html> 


习 题 


1. 编写 CSS 样式 ,使 矩形 块 的 颜色 申 红 变 黄 ,再 变 绿 , 如 图 6.8 所 示 。 





图 6.8 改变 块 颜色 


2. 编写 CSS 样式 ,使 以 下 和 矩形 块 从 页 面 左 侧 向 右 侧 移动 ,移动 的 同时 做 360" 翻 滚 ， 
如 图 6. 9 所 示 。 





图 6.9 移动 块 


3. 编写 CSS 样式 ,制作 按钮 自动 发 光 效果 ,通过 字体 颜色 、 背 景 颜色 、 阴 影 颜色 大 小 
的 变化 实现 ,如 图 6. 10 所 示 。 


发 光 的 button 


图 6.10 发 光 的 按钮 


JavaScript 基础 


本 章 介绍 JavaScript 的 基本 语法 ,主要 从 JavaScript 中 的 数据 类 型 .变量 声明 及 类 型 
转换 、 表 达 式 和 运算 符 、 数 组 的 使 用 等 几 个 方面 介绍 JavaScript 的 基本 语法 规则 。 

学 习 重点 与 难点 

重点 : 

(1) JavaScript 基本 语法 、 变 量 定义 常见 数据 类 型 .运算 符 \ 流 程控 制 语 句 的 使 用 。 

(2) 数据 类 型 中 的 Undefined、Null、Object 类 型 。 

难点 : 

(1) typeof 运算 符 的 使 用 方法 和 返回 值 。 

(2) JavaScript 定义 函数 的 语法 、 常 见 的 事件 和 事件 处 理 过程 . 事 件 处 理 函 数 的 编写 。 

重点 及 难点 学 习 指导 建议 : 

。 重点 掌握 JavaScript 的 函数 和 事件 处 理 , 先 学 会 编写 简单 的 事件 处 理 响应 函数 。 
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7.1 _ JavaScript 简介 


1. 发 展 由 来 


JavaScript 是 由 Netscape 公司 的 LiveScript 发 展 而 来 的 。Netscape 最 初 是 将 其 脚本 
语言 命名 为 LiveScript, 后 来 Netscape 在 与 Sun 合作 之 后 将 其 改名 为 JavaScript。 
JavaScript 最 初 是 受 Java 启发 而 开始 设计 的 ,目的 之 一 是 “看 上 去 像 Java”, 因 此 语法 上 有 
类 似 之 处 ,一些 名 称 和 命名 规范 也 借 自 Java, 但 JavaScript 的 主要 设计 原则 源 自 Self 和 
Scheme。 之 后 ,作为 竞争 对 手 的 微软 在 自家 的 IE3 中 加 入 了 名 为 JScript( 名 称 不 同 是 为 
了 避免 侵权 ) 的 JavaScript 实现 。 此 时 市 面 上 意味 着 有 3 个 不 同 的 JavaScript 版 本 ,IE 的 
JScript、Netscape 的 JavaScript 和 ScriptEase 中 的 CEnvi。 当 时 还 没有 标准 规定 
JavaScript 的 语法 和 特性 。 随 着 版 本 不 同 ,暴露 的 问题 日 益 加 剧 ,JavaScript 的 规范 化 最 
终 被 提 上 日 程 。 

1997 年 ,在 欧洲 计算 机 制造 商 协 会 (European Computer Manufactures Association， 
ECMA) 的 协调 下 ,由 Netscape、Sun、 微 软 、.Borland 组 成 的 工作 组 确定 统一 标准 : ECMA- 
262。JavaScript 的 正式 名 称 是 ECMAScript( 发 音 为 ek-ma-script)。 这 个 标准 由 ECMA 
组 织 发 展 和 维护 。ECMA-262 是 正式 的 JavaScript 标准 。1998 年 ,该 标准 成 为 国际 ISO 
标准 (ISO/IEC 16262)。2005 年 12 月 ,ECMA 发 布 ECMA-357 标准 (ISO/IEC 22537)， 
主要 增加 了 对 扩展 标记 语言 (XML) 的 有 效 支持 。 


2. 组 成 部 分 


完整 的 JavaScript 实现 包含 3 个 部 分 : ECMAScript 文档 对 象 模型 (DOM) ,浏览 器 
对 象 模型 (BOMD) ,如 图 7. 1 所 示 。 

ECMAScript 描述 了 该 语言 的 语法 和 基本 对 象 。 we 

文档 对 象 模 型 描述 处 理 网 页 内 容 的 方法 和 接口 。 EcmAscript oo BOM 

浏览 器 对 象 模型 描述 与 浏览 器 进行 交互 的 方法 和 
接口 。 


3. 基本 将 点 


JavaScript 脚本 语言 具有 以 下 特点 。 

(1) 脚本 语言 。JavaScript 是 一 种 解释 型 的 脚本 语言 ,C、C++ 等 语言 先 编译 ,后 执 
行 ,而 JavaScript 是 在 程序 的 运行 过 程 中 逐 行进 行 解释 的 。 

(2) 基于 对 象 。JavaScript 是 一 种 基于 对 象 的 脚本 语言 , 它 不 仅 可 以 创建 对 象 ,也 能 
使 用 现 有 的 对 象 。 

(3) 简单 。JavaScript 语言 中 采用 的 是 弱 类 型 的 变量 类 型 ,对 使 用 的 数据 类 型 未 做 出 
严格 的 要 求 ,是 基于 Java 基本 语句 和 控制 的 脚本 语言 ,其 设计 简单 紧凑 。 

(4) 动态 性 。JavaScript 是 一 种 采用 事件 驱动 的 脚本 语言 , 它 不 需要 经 过 Web 服务 
































图 7.1 JavaScript 组 成 
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器 ,就 可 以 对 用 户 的 输入 做 出 响应 。 访 问 一 个 网 页 时 ,用 户 在 网 页 中 进行 鼠标 单 击 或 上 下 
移动 .窗口 移动 等 操作 ,JavaScript 都 可 直接 对 这 些 事件 给 出 相应 的 响应 。 

(5) 跨 平台 性 。JavaScript 脚本 语言 不 依赖 于 操作 系统 , 仅 需要 浏览 器 的 支持 。 因 
此 ,一 个 JavaScript 脚本 编写 后 可 以 到 任意 机 器 上 使 用 ,前 提 是 机 器 上 的 浏览 器 支持 
JavaScript 脚本 语言 。 目 前 ,JavaScript 已 被 大 多 数 的 浏览 器 所 支持 。 

不 同 于 服务 器 端 脚本 语言 ,如 PHP 与 ASP,JavaScript 主要 被 作为 客户 端 脚本 语言 
在 用 户 的 浏览 器 上 运行 ,不 需要 服务 器 的 支持 。 所 以 ,在 早期 程序 员 比 较 青 睐 于 
JavaScript ,以 减少 对 服务 器 的 负担 ,与 此 同时 也 带 来 另 一 个 问题 : 安全 性 。 

随 着 服务 器 的 强壮 ,虽然 程序 员 更 喜欢 运行 于 服务 端的 脚本 ,以 保证 安全 ,但 
JavaScript 仍然 以 其 跨 平 台 容易 上 手 等 优势 大 行 其 道 。 同 时 ,有 些 特殊 功能 (如 AJAX) 
必须 依赖 JavaScript 在 客户 端 进行 支持 。 随 着 引擎 (如 V8) 和 框架 (如 Node. js) 的 发 展 ， 
及 其 事件 驱动 及 异步 1O 等 特性 ,JavaScript 逐渐 被 用 来 编写 服务 器 端 程序 。 
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1. 引入 方式 


在 HTML 页 面 中 嵌入 JavaScript 代码 有 两 种 方式 。 
1) 直接 嵌入 HTML 文件 中 
这 是 最 常用 的 方法 ,大 部 分 含有 JavaScript 代码 的 页 面 都 采用 这 种 方法 ,如 下 面 的 例 
子 将 JavaScript 代码 直接 写 在 二 script 二 二 /script 二 标签 中 。 
<script> 


document .write(" 这 是 一 行 JavaScript 代 码 "); 
</script> 


2) 引用 外 部 文件 

为 了 提高 程序 代码 的 可 重用 性 ,可 以 将 一 些 常 用 功能 实现 代码 写 在 一 个 单独 的 
JavaScript 源 文件 中 (扩展 名 为 .js) ,在 页 面 中 使 用 二 script 二 标签 将 该 文件 引入 进来 即 
可 ,如 下 所 示 。 


<script type="text/javascript” src="js/test.js” ></script> 
其 基本 格式 如 下 。 


< script type= "text/javascript"src=" 外 部 js 文件 url 地 址 ">< /script> 


其 中 ,type 属性 代表 脚本 的 MIME 类 型 ,MIME 类 型 由 两 部 分 组 成 : 媒介 类 型 和 子 类 型 。 
对 于 JavaScript, 其 MIME 类 型 是 "text/javascript"; 在 HTML5 规范 中 ,script 的 type 
属性 默认 是 text/javascript, 所 以 可 以 省 略 ;但 是 ,在 HTML4.01 和 XHTML1.0 规范 中 ， 
type 属性 是 必需 的 。 

src 属性 代表 JavaScript 源 文件 的 URL 地 址 。 
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如 二 script type 一 "textV/javascript”src 一 ".. /js/jquery-1. 8. 3. js" 之 二 /script 盖 ( 相 
对 路 径 ) 或 者 是 二 script src 二 "http://common. cnblogs. com/script/jquery. js" type 一 
"text/javascript" 二 一 /script 二 (绝对 路 径 ) 。 


2. 书写 位 置 


JavaScript 的 书写 位 置 大 致 有 3 个 地 方 。 
第 一 个 地 方 ,可 以 写 在 head 头 部 ,例如 : 


<1DOCTYPE html> 
<html> 
| <head> 
<meta charset="utf-8"> 
<title></title> 
<script> 
alert("hello world"); 
</script> 
</head> 
<body></body> 
</html> 


第 二 个 地 方 ,可 以 写 在 body 中 ,例如 : 


<body> 


<script type="text/javascript” src="http://common.cnblogs.com/script/jquery.js"></script> 
《py> 这 里 是 一 段 文本 ! </p> 
<script> 
window.onload = function(){ 
var script = document.createElement("script"); 
script.setAttribute("type", "text/javascript"); 
script.src = "http://common.cnblogs.com/script/jquery.js"; 


document .getElementsByTagName("head")[6].appendChild(script); 
} 


</script> 
</body> 


第 三 个 地 方 ,以 事件 的 形式 写 在 标签 上 ,例如 : 


<p onClick="javascript:alert(' 是 谁 点 了 我 ?" )"> 点 我 点 我 。 </p> 
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1. javaScript 输出 


JavaScript 语句 向 浏览 器 发 出 命令 语句 的 作用 是 告诉 浏览 器 该 做 什么 。 


<script> 
document .write ("hello world!"); 


</script> 
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2. 分 号 


语句 之 间 的 分 隔 用 分 号 (; ) 。 
注意 : 分 号 是 可 选项 ,JavaScript 有 自动 填补 分 号 的 机 制 。 


3. 执行 顺序 
按照 编写 顺序 依次 执行 。 
4. 大 小 写 敏 感 


JavaScript 语言 是 区 分 大 小 写 的 ,不 管 是 命名 变量 ,还 是 使 用 关键 字 的 时 候 。 
如 前 面 alert 弹出 提示 框 的 例子 ,如 果 将 alert 命令 改 为 ALERT 或 者 alerT 等 ,运行 
时 将 产生 错误 。 





5. 室 格 

JavaScript 会 忽略 掉 多 余 的 空格 。 

6. 代码 换行 

不 可 以 在 单词 之 间 换行 。 
7.3.2 标识 符 


所 谓 标 识 符 , 是 指 变量 、 函 数 、 属 性 的 名 字 , 或 者 函数 的 参数 。JavaScript 标识 符 的 命 
名 遵循 以 下 规则 。 

。 JavaScript 标识 符 必须 以 字母 .下面 线 (_) 或 美元 符 ($) 开 始 。 

。 后续 的 字符 可 以 是 字母 .数字 、 下 面 线 或 美元 符 ( 数 字 是 不 允许 作为 首 字 符 出 现 

的 ,以 便 JavaScript 可 以 轻易 区 分 开标 识 符 和 数字 )。 

。 不 能 把 关键 字 和 保留 字 作为 标识 符 。 

和 其 他 任何 编程 语言 一 样 ,JavaScript 保留 了 一 些 标识 符 为 自己 所 用 。 

JavaScript 同样 保留 了 一 些 关 键 字 ,这 些 关 键 字 在 当前 的 语言 版 本 中 并 没有 使 用 ,但 
在 以 后 JavaScript 扩展 中 会 用 到 。 

JavaScript 中 最 重要 的 保留 字 ( 按 字母 顺序 ) 见 表 7. 1。 


表 7.1 JavaScript 中 最 重要 的 保留 字 

















abstract else instanceof super 
boolean enum int switch 

break export interface synchronized 
byte extends let this 

case false long throw 

catch final native throws 
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续 表 
char finally new transient 
class float null true 
const for package try 
continue function private typeof 
debugger goto protected var 
default if public void 
delete implements return volatile 
do import short while 
double in static with 

7.3.3 注释 


JavaScript 中 的 注释 符号 和 Java 中 的 注释 符号 基本 一 致 ,也 分 为 单行 和 多 行 注 释 。 
注释 后 的 信息 仅 是 为 了 说 明 程序 代码 的 功能 ,在 程序 的 解释 和 运行 中 是 被 忽略 的 。 

注释 符号 分 为 以 下 两 种 。 

。 单行 注释 : 使 用 “//” 符 号 对 单行 信息 进行 注释 。 

。 多 行 注释 : 使 用 “/ x* x*/” 符 号 对 多 行 信息 进行 注释 。 


7.3.4 ”项目 : 第 一 个 JavaScript 程序 

1. 项 目 说 明 

编写 第 一 个 JavaScript 程序 ,要 求 利 用 JavaScript 语言 在 页 面 中 输出 “Hello World” 
信息 ,如 图 7.2 所 示 。 


EF 
| ose 1 p= ©| ocodesvhoss | 


文件 (篇 各 (E) ”查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 





Hello World 





图 7.2 第 一 个 JavaScript 程序 


2. 项 目 设 计 


本 项 目的 功能 十 分 简单 ,可 采用 在 HTML 页 面 中 直接 嵌入 JavaScript 代码 的 方式 实 
现 。JavaScript 是 一 种 客户 端 脚本 语言 ,目前 所 有 主流 浏览 器 都 内 嵌 了 JavaScript 引擎 解 
释 执 行 JavaScript 代码 ,因此 ,在 HTML 页 面 中 均 可 以 直接 嵌入 JavaScript 代码 为 页 面 
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添加 一 些 动态 效果 和 交互 功能 。 

使 用 JavaScript 可 以 直接 访问 和 操作 HTML 元 素 , 例如 使 用 JavaScript 的 
document 对 象 的 方法 可 以 直接 访问 和 操作 HTML DOM 元 素 。 本 项 目 就 可 以 利用 
document 对 象 的 方法 完成 向 页 面 输出 信息 的 功能 。 

在 本 项 目 中 ,编写 第 一 个 JavaScript 程序 。 

(1) 首先 ,在 HTML 页 面 中 嵌入 JavaScript 代码 ,通常 会 写 在 一 head 二 一 /head 二 标 
签 之 间 。JavaScript 代码 必须 用 二 script 二 二 /script 二 标签 括 起 来 。 毛 script 过 标签 中 的 
language 属性 用 来 指明 嵌入 的 脚本 代码 是 使 用 哪 种 语言 编写 的 ,该 属性 可 以 省 略 , 其 默认 
值 为 JavaScript。 和 能 入 的 JavaScript 代码 不 需要 传 给 服务 器 处 理 , 可 以 通过 浏览 器 直接 运行 。 

(2) 接 下 来 ,在 二 script 二 与 二 /script 二 之 间 编 写 一 条 JavaScript 语句 ,这 里 使 用 了 
JavaScript 中 的 document 对 象 的 write() 方 法 直接 向 页 面 输出 信息 。 关 于 document 对 
象 的 具体 含义 和 常用 方法 的 使 用 ,会 在 后 面 详细 介绍 。 


3. 项 目 实施 
本 项 目 代码 如 下 。 


<html> 
<head> 
<script> 
document .write ("Hello World"); 
</script> 
</head> 
<body> 
< /body> 
</html> 


将 以 上 HTML 文件 保存 为 “第 一 个 JavaScript. html”, 使 用 浏览 器 打开 ,会 看 到 页 面 
上 输出 了 “Hello World”。 





4. 知识 运用 
修改 以 上 JavaScript 代码 ,使 其 在 页 面 上 输出 以 下 内 容 , 效 果 如 图 7. 3 所 示 。 


Hello World 
Welcome to Dalian! 


x 
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文件 ”编辑 (E) ”查看 (V) 收藏 夫 (A) 工具 (T) 。 帮助 (H) 





Hello World 
Welcome to Dalian! 





图 7.3 使 用 JavaScript 输出 信息 
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74 数据 类 型 


7.4.1 常用 数据 类 型 


JavaScript 中 支持 的 数据 类 型 有 以 下 几 种 。 

。 字符 串 : 使 用 单 引号 或 双 引号 括 起 来 的 一 个 或 多 个 字符 ,如 "abc" hello'" 你 好 "。 

。 数值 : 包括 整数 和 浮 点 数 ,整数 可 以 表示 正 负 整数 和 零 , 浮 点 数 可 以 用 整数 加 小 
数 表示 ,也 可 以 用 科学 计数 法 表示 。 

。 布尔 值 : 可 以 取 值 为 true 和 false。 

对 象 : object 是 JavaScript 的 重要 组 成 部 分 。 

。 空 值 : 空 值 null。 

未 定义 值 : 未 定义 值 undefined 。 

。 特殊 字符 : 又 称 转 义 字符 ,主要 有 以 下 8 种 ( 表 7.2)。 

















表 7.2 特殊 字符 
特殊 字符 含 义 特殊 字符 洛 奖 
\b 表示 退 格 由 表示 双 引 号 本 身 
\n 表示 换 页 0 表示 单 引 号 本 身 
YE 表示 Tab 符号 \ 表示 反 斜 线 
\r 表示 回 车 符 \b 表示 退 格 














7.4.2 typeof 运算 符 
typeof 是 一 元 运算 符 , 用 来 返回 操作 数 类 型 的 字符 串 。typeof 的 返回 值 见 表 7. 3。 
表 7.3 typeof 的 返回 值 











输入 操作 数 输出 字符 串 输入 操作 数 输出 字符 串 
未 定义 undefined 数值 number 
布尔 值 boolean 对 象 或 者 null object 
字符 串 string 函数 function 














(1) 下 面 是 几 个 typeof 运算 的 例子 。 


console.1log (typeof 42) 7 // 输 出 "number" 
console.1log (typeof 'blubber'); // 输 出 "string" 
console.log (typeof true); // 输 出 "boolean" 


console.1og (typeof declaredButUndefinedVariable); // 输 出 "undefined"; 


(2) 可 以 使 用 typeof 判断 一 个 变量 是 否 存在 。 
如 这 (typeof a!l 二 "undefined"){}) ,不 要 使 用 f(a) ,因为 如 果 a 不 存在 (未 声明 ) , 则 会 
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出 错 。 
(3) 如 果 typeof 的 运算 数 未 定义 ,返回 的 就 是 undefined。 
(4) typeof 语法 中 的 圆 括号 是 可 选项 。 
运算 数 为 数字 typeof(x) 一 "number" 。 
运算 数 为 字符 串 typeof(x) 一 "string"。 
运算 数 为 布尔 值 typeof(x) 王 "boolean" 。 
运算 数 为 对 象 .数组 和 null typeof(x) 王 "object" 。 
运算 数 为 函数 typeof(x) 一 "function" 。 
(5) typeof 运算 符 返 回 一 个 用 来 表示 表达 式 的 数据 类 型 的 字符 串 。 
可 能 的 字符 串 有 : "number""string""boolean""object""function" 和 "undefined"。 如 : 





alert (typeof (123)); //typeof (123) 返 回 "number" 
alert (typeof ("123")); //typeof ("123") 返 回 "string" 


(6) 对 于 Array、Null 等 特殊 对 象 使 用 typeof ,一 律 返回 object, 这 正 是 typeof 的 局 
限 性 。 

如 果 和 希望 获取 一 个 对 象 是 否 是 数组 ,或 判断 某 个 变量 是 否 是 某 个 对 象 的 实例 , 则 要 选 
择 使 用 instanceof。instanceof 用 于 判断 一 个 变量 是 否 为 某 个 对 象 的 实例 ,如 var a 二 new 
Array() ;alert(a instanceof Array); 会 返回 true, 同 时 alert(a instanceof Object) 也 会 返回 
true; 这 是 因为 Array 是 Object 的 子 类 。 





7.4.3 Undefined 类 型 


Undefined 类 型 只 有 一 个 值 , 即 undefined, 表 示 变 量 已 声明 ,但 未 被 初始 化 。 需 要 注 
意 的 是 , 当 使 用 typeof 操作 符 判 断 数据 类 型 时 ,未 被 声明 的 变量 和 未 初始 化 的 变量 返回 
的 值 都 为 undefined 。 














Var message; 
console. log (typeof message) //undefined 
console.1log (typeof age); //undefined 


7.4.4 Null 类 型 


Null 类 型 只 有 一 个 值 , 即 null, 表 示 一 个 空 对 象 指针 。 使 用 typeof 操作 符 返 回 的 值 
是 object。 需 要 注意 的 是 ,undefined 值 是 派生 自 null 值 的 ,因此 ECMA-262 规定 对 它们 
的 相等 性 测试 要 返回 true。 


console.log (null==undefined); //true 
可 以 这 样 判断 一 个 变量 是 否 是 undefined。 
typeof variable=== "undefined™" 


可 以 这 样 判 断 一 个 变量 是 否 是 null。 
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variable===null 
用 双 等 号 比较 时 它们 相等 ,但 用 三 等 号 比较 时 它们 不 相等 。 
null==undefined //true 
null===undefined //false 
7.4.5 Object 类 型 


ECMAScript 中 的 对 象 是 可 变 的 键 控 集合 ( 即 一 组 数据 和 功能 的 集合 ) 。 它 将 很 多 值 
聚合 在 一 起 ,可 通过 名 字 访 问 这 些 值 。 对 象 也 可 被 看 作 是 属性 的 容器 ,每 个 属性 都 是 一 个 
名 / 值 对 。 属 性 的 名 字 可 以 是 包括 空 字符 串 在 内 的 任意 字符 串 。 属 性 值 可 以 是 除 
undefined 值 之 外 的 任何 值 。 对 象 最 常见 的 用 法 是 创建 (create)、 设置 (set)、 查 找 
(query) ,删除 (delete) ,检测 (test) 和 枚 举 (enumerate) 它 的 属性 。 


1. 创建 Object 实例 的 方式 
(1) 使 用 new 操作 符 后 跟 Object 构造 函数 。 





Var person= new Object () 7 
person.name= "Nicholas"; 


person.age=21; 
(2) 对 象 字 面 量 表示 法 。 


Var person= { 

name:"Nicholas", 

age:21, 

5:true // 数 值 属性 名 会 自动 转化 为 字符 串 
和 


在 通过 对 象 字面 量 定 义 对 象 时 ,实际 上 不 会 调用 Object 构造 函数 。 
2. 访问 对 象 属性 的 方法 
(1) 点 表示 法 。 


(2) 方 括号 表示 法 。 
例如 ,访问 上 例 中 person 的 属性 name, 写 法 如 下 。 


alert (person.name) 7 // "Nicholas" 
alert (person["name"]); //"Nicholas" 
Var propertyName= "name"7 

alert (person [propertyName]); //"Nicholas™ 


。 方 括号 语法 应 该 将 要 访问 的 属性 以 字符 串 的 形式 放 在 方 括 号 中 。 
。 从 功能 上 看 ,这 两 种 访问 属性 的 方法 没有 任何 区 别 , 但 方 括号 表示 法 可 以 通过 变 
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量 访问 属性 。 
。 如 果 属 性 名 中 包含 空格 ,或 者 属性 名 使 
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1. 变量 声明 


用 的 是 关键 字 或 保留 字 , 则 使 用 方 括号 法 。 


在 JavaScript 中 ,变量 的 类 型 采用 弱 类 型 的 方式 , 即 声明 变量 时 不 需要 严格 指明 变量 
的 数据 类 型 ,所 有 变量 的 声明 均 使 用 var 关键 字 。 当 为 变量 赋值 时 ,会 根据 赋 给 变量 的 值 


的 类 型 确定 变量 的 数据 类 型 。 
例如 


Var varName= "Hello JavaScript"7 


在 上 面 的 例子 中 ,变量 varName 的 数据 类 
变量 命名 时 ,需要 遵守 以 下 规则 。 


型 就 是 字符 串 类 型 。 


。 变量 命名 必须 以 一 个 英文 字母 或 下 画 线 为 开头 。 也 就 是 说 ,变量 名 第 一 个 字符 必 
须 是 A 到 Z 或 是 a 到 z 之 间 的 字母 或 是 ””。 


变量 名 长 度 在 0 一 255 字符 之 间 。 

除了 首 字 符 , 其 他 字符 可 以 使 用 任何 字 
不 可 以 使 用 JavaScript 的 运算 符号 ,如 
不 可 以 使 用 JavaScript 用 到 的 保留 字 ， 


myvar 是 不 同 的 两 个 变量 。 
JavaScript 变量 的 作用 域 包括 两 种 。 
。 全 局 变量 ,定义 在 函数 体 之 外 ,作用 范 目 
。 局 部 变量 ,定义 在 函数 体 之 内 ,作用 范 目 


2. 类 型 转换 


符 ,数字 及 下 面 线 , 但 是 不 可 以 使 用 空格 。 
A 


如 var function 等 。 


在 JavaScript 中 ,变量 名 中 的 大 小 写字 母 是 有 所 区 别 的 。 例 如 ,变量 myVar 和 


目 是 所 有 邱 数 。 
目 是 本 函数 。 





JavaScript 中 提供 了 显 式 地 将 值 从 一 种 数据 类 型 转换 为 男 一 种 数据 类 型 的 转换 函 


数 。 基 本 数据 类 型 转换 有 3 种 函数 。 
。 转换 为 字符 串 类 型 . String() 
例如 : 


String(2012) 的 结果 为 字符 串 "2012" 


。 转换 为 数值 类 型 : Number() 
例如 : 


Number ("2012") 的 结果 为 数值 2012 
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。 转换 为 布尔 类 型 : Boolean() 
例如 : 


Boolean (false) 的 结果 为 布尔 值 false 


另外 ,在 ECMAScript v3 和 JavaScript 1. 5 中 ,增加 了 3 种 将 数字 转换 成 字符 串 的 
方法 。 

。 toFixed() : 把 数字 转换 成 字符 串 ,并 显示 小 数 点 后 指定 的 位 数 。 
toExponential() : 用 指数 计数 法 把 数字 转换 成 字符 串 ,该 字符 串 中 的 小 数 点 前 有 
一 位 数字 ,小 数 点 后 有 指定 位 数 的 数字 。 
toPrecision() : 用 指定 位 数 的 有 效 数 字 显 示 数 字 , 如 果 有 效 数 字 的 位 数 不 足以 显 
示 数 字 的 整数 部 分 , 它 将 采用 指数 计数 法 显示 数字 。 

JavaScript 也 提供 了 更 灵活 的 字符 串 到 数值 的 转换 函数 。 

。 parseInt() : 将 字符 串 转 换 为 整数 ,并 忽略 其 后 所 有 非 数字 后 级 。 对 于 以 0x 和 0X 

开头 的 字符 串 ,parselInt() 将 它 解释 为 十 六 进 制 数 。parseInt() 还 可 以 具有 第 二 个 
参数 ,用 来 指定 要 被 解析 的 数 的 基数 。 其 合法 值 为 2 一 36 。 

。 parseFloat(): 将 字符 串 转 换 为 浮 点 数 , 并 忽略 其 后 所 有 非 数字 后 级 。 

需要 注意 的 是 ,如 果 parseInt() 和 parseFloat() 不 能 将 指定 的 字符 串 转换 成 数字 ,将 
返回 NaN。 
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JavaScript 中 支持 的 运算 符 主要 有 以 下 5 种 。 
5 委 术 运算 符 # 十 ,一 sj/i% 十 十 一 一 。 
比较 运算 符 ; 二: 放 :过 = 二 =、 Sl (严格 等 于 )、!= = (严格 不 
等 于 )。 
逻辑 运算 符 : &&、||、!1。 

。 赋值 运算 符 ; 二、 十 ==、 *=,\/=,%=,&=,|=,^=,<<=,>> 

生 二 二 =。 

。 条 件 选择 符 : 条 件 表达 式 ? A: B。 

例如 : 

(time>=12)? "上 午 ":" 下 午 "; 

JavaScript 中 的 表达 式 是 变量 .常量 ,布尔 以 及 运算 符 的 集合 ,可 以 对 变量 进行 赋值 、 
改变 、 计 算 等 一 系列 操作 。 

表达 式 可 以 分 为 以 下 4 种 。 

。 算术 表达 式 。 

。 字符 串 表达 式 。 

。 赋值 表达 式 。 

。 布尔 表达 式 。 

















HTMLS5+CSSGs+JavaSseript 顺 肯 开发 


77 流程 控制 语句 


JavaScript 中 提供 的 流程 控制 语句 可 以 分 为 条 件 和 分 支 语句 、 循 环 语句 。 


1. 条件 和 分 支 语 句 : 让 '…else 语句 、switch 语句 


(1) if…else 语句 是 最 基本 、 最 简单 的 条 件 语句 。 其 语法 格式 如 下 。 


证 (条 件 ) 
| 
当 条 件 为 true 时 执行 的 代码 
3 
else 
当 条 件 不 为 true 时 执行 的 代码 


(2) 使 用 if…else if…else 语句 选择 多 个 代码 块 之 一 执行 。 


证 (条 件 1) 

| 当 条 件 1 为 true 时 执行 的 代码 
ee if (条 件 2) 

; 当 条 件 2 为 true 时 执行 的 代码 


当 条 件 1 和 条 件 2 都 不 为 true 时 执行 的 代码 


例如 : 如 果 时 间 小 于 10:00, 则 发 送 问候 "Good morning" ,否则 如 果 时 间 人 小 
则 发 送 问 候 "Good day" ,和 否则 发 送 问候 "Good evening"。 





if (time< 10) 


X= "Good morning"7 


else if (time<20) 


X= "Good day™; 


else 








FF 20 :00， 
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X= "Good evening"7 


(3) switch 语句 用 于 对 一 个 表达 式 进 行 多 次 判断 ,每 一 种 取 值 都 采取 不 同 的 处 理 方 
法 。 其 语法 格式 如 下 。 


Switch (n) 
Case 1: 
执行 代码 块 1 
break; 
Case 2: 
执行 代码 块 2 
break; 
default: 
n 与 case 1 和 case 2 不 同时 执行 的 代码 
3} 


例如 : 如果 今 天 不 是 周 六 或 周 日 , 则 会 输出 默认 的 消息 。 


var day=new Date () .getDay () 7 
switch (day) 
{ 
Case 6: 
x="Today it's Saturday"; 
break; 
case 0: 
x="Today it's Sunday"; 
break; 
default: 
x= "Looking forward to the Weekend"; 
， 


2. 循环 语句 : for 语 句 、while 语句、do…while 语句 、break 语句 和 
Continue 语句 
(1) for 语句 ,用 于 反复 执行 一 段 程序 ,并 且 在 每 次 循环 后 处 理 变量 ,直到 循环 条 件 表 
达 式 计算 结果 为 假 。 其 语法 格式 如 下 。 


for (循环 变量 初始 化 语句 ; 循环 条 件 表达 式 ; 循环 变量 更 新 语句 ) { 
循环 语句 块 ; 
} 


例如 : 


for (var i=0; i<5; i++) 
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document .write ("The number is "+i+"<br>"); 


} 

(2) while 语句 ,用 于 在 循环 条 件 成 立时 一 直 循环 执行 一 些 语句 块 ,直到 条 件 不 成 立 
为 止 , 其 循环 次 数 不 固 定 。while 语句 在 执行 循环 体 语句 块 之 前 先 检查 循环 条 件 , 若 条 件 
不 满足 , 则 一 次 也 不 执行 ,直接 退出 。 其 语法 格式 如 下 。 

hile (循环 条 件 表达 式 ) { 

循环 语句 所; 

} 


例如 : 


while (i<5) 
document .write ("The number is "+i+"<br>"); 
t+? 
3 
(3) do…while 语句 ,与 while 语句 类 似 ,区 别 在 于 do…while 语句 在 执行 循环 体 语句 
块 之 前 不 会 先 检查 循环 条 件 ,即使 条 件 不 满足 ,循环 体 语句 块 也 会 至 少 执行 一 次 。 其 语法 
格式 如 下 。 
do{ 


循环 语句 块 ; 
}while (循环 条 件 表达 式 ) 


例如 : 


do 
document .write ("The number is "+i+"<br>"); 
#3 
4 
while (i<5); 


(4) break 语句 。 
break 语句 用 于 无 条 件 地 跳出 switch 语句 或 者 循环 结构 。 
(5) continue 语句 。 


continue 语句 用 于 结束 本 轮 循 环 , 直 接 进 行 下 一 轮 循环 。 
78 JavaScript 函数 


7.8.1 JavaScript 困 数 定义 
1. 函数 定义 
本 节 介 绍 如 何 定义 JavaScript 中 的 函数 。 
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在 JavaScript 中 ,函数 可 以 简单 理解 为 一 组 语句 ,用 来 完成 一 系列 工作 。JavaScript 
函数 可 以 封装 在 程序 中 可 能 需要 多 次 使 用 的 模块 ,并 可 以 作为 事件 驱动 处 理 程序 。 

使 用 函数 前 一 定 要 先进 行 定义 。 函 数 定义 分 为 3 个 部 分 : 函数 名 、 参 数列 表 和 郴 
数 体 。 

定义 函数 的 语法 格式 如 下 。 

function 函数 名 (参数 1, 参数 2, …， 参数 和 

LL 

函数 体 (语句 集 ) 

$ 

使 用 函数 时 需要 注意 以 下 几 点 。 

(1) 函数 名 是 调用 函数 时 引用 的 名 称 , 它 区 分 大 小 写 。 

(2) 参数 表示 传递 给 函数 使 用 或 操作 的 值 , 它 可 以 是 常量 ,也 可 以 是 变量 ,在 函数 内 
部 可 以 通过 arguments 对 象 访问 所 有 参数 。 

(3) 函数 体 中 的 return 语句 用 于 返回 函数 的 返回 值 。 函 数 也 可 以 不 返回 任何 值 。 

(4) 函数 在 定义 时 ,其 中 的 代码 并 不 会 被 执行 。 只 有 当 函 数 被 调用 时 ,其 中 的 代码 才 
会 真正 被 执行 。 

2. 函数 参数 


调用 函数 时 ,变量 、 常 量 都 可 以 作为 参数 传递 。 参 数 的 传递 是 以 传 值 的 方式 进行 的 。 
例如 : 


hello ("jason"); 

Var user= "jason"; hello (user); 

也 可 以 在 定义 函数 时 不 指定 使 用 的 参数 ,JavaScript 会 在 每 次 调用 该 函数 时 自动 生 
成 arguments 数组 ,并 建立 与 参数 列表 有 关 的 属性 。 

。 Functionname. arguments 是 一 个 数组 ,每 一 个 参数 对 应 其 中 的 一 个 元 素 , 可 以 使 

用 该 数组 访问 调用 时 传送 的 参数 。 
。 Functionname. arguments. length 是 一 个 整 型 变量 ,表示 传递 参数 的 个 数 。 
。 可 以 使 用 这 两 个 属性 产生 参数 个 数 可 变 的 函数 。 


3. 函数 返回 值 


函数 有 时 需要 有 返回 值 , 可 以 使 用 return 语句 ,将 需要 返回 的 值 放 在 return 后 面 ,可 
以 是 常量 .变量 以 及 有 唯一 确定 值 的 有 效 表 达 式 。 


4. 函数 中 的 变量 


在 JavaScript 函数 内 部 声明 的 变量 称 为 局 部 变量 ,只 能 在 函数 内 部 访问 它 。 可 以 在 
不 同 的 函数 中 声明 和 使 用 名 称 相同 的 局 部 变量 。JavaScript 变量 的 生命 周期 从 它们 被 声 
明 时 开始 ,只 要 函数 运行 完毕 ,局 部 变量 就 会 被 删除 。 
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在 函数 外 声明 的 变量 是 全 局 变量 ,网 页 上 的 所 有 脚本 和 函数 都 能 访问 它 。 全 局 变量 
会 在 页 面 关闭 后 被 删除 。 


7.8.2 项 目 : 单 击 我 
1. 项 目 说 明 


完成 简单 的 JavaScript 按钮 单 击 程序 ,并 弹出 对 话 框 。 在 页 面 上 放置 两 个 按钮 ,按钮 
上 的 文字 均 为 “ 单 击 我 ”, 效 果 如 图 7.4 所 示 。 
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7.4 页面 上 放置 按钮 


当 单 击 第 一 个 按钮 时 ,弹出 对 话 框 ,提示 信息 “this 按钮 被 单 击 ”; 单 击 第 二 个 按钮 时 ， 
弹出 对 话 框 ,提示 信息 “that 按钮 被 单 击 ”, 效 果 如 图 7.5 所 示 。 





T 





























图 7.5 按钮 被 单 击 后 弹出 的 对 话 框 


2. 项 目 设计 


本 项 目 是 一 个 简单 的 JavaScript 的 函数 定义 和 事件 响应 功能 的 实现 。JavaScript 中 
的 函数 可 以 定义 一 组 可 重复 使 用 的 代码 块 , 并 且 可 以 由 相应 的 事件 驱动 和 调用 。 某 个 事 
件 发 生 时 会 自动 调用 指定 的 事件 处 理 函 数 (如 当 用 户 单 击 按钮 时 ) 。 

本 项 目 中 , 当 发 生 了 鼠标 对 按钮 的 单 击 事 件 后 ,要 调用 响应 处 理 操作 的 函数 。 因 此 ， 
在 本 项 目 中 要 使 用 JavaScript 编写 对 鼠标 单 击 事件 的 事件 处 理 函 数 ,在 其 中 完成 具体 的 
事件 响应 处 理 操作 。 

(1) 在 HTML 页 面 主体 部 分 定义 两 个 按钮 ,它们 的 onclick 事件 的 事件 处 理 函 数 均 
声明 为 clickme() ,并 在 调用 时 传递 了 不 同 的 实 参 。 其 中 ,第 一 个 按钮 调用 clickme() 函 数 
时 传递 的 实 参 值 为 this, 第 二 个 按钮 调用 clickme() 函数 时 传递 的 实 参 值 为 that。 
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(2) 需要 在 HTML 页 面 二 head 盖 的 标签 内 编写 JavaScript 函数 。 这 里 使 用 function 
关键 字 定 义 了 一 个 名 为 clickme() 的 函数 ,并 且 该 函数 带 一 个 参数 ,名 为 str。 在 函数 体内 
使 用 alert() 方 法 弹出 一 个 对 话 框 ,对 话 框 中 显示 的 提示 信息 为 : 参数 str 的 值 十 “按钮 被 
单 击 ”。 

因此 , 单 击 第 一 个 按钮 后 .会 弹出 对 话 框 ,显示 提示 信息 “this 按钮 被 单 击 ”, 单 击 第 二 
个 按钮 后 ,对 话 框 的 提示 信息 变 为 “that 按钮 被 单 击 ”。 


3. 项 目 实施 
本 项 目 代码 如 下 。 


<html> 
<head> 
<script language= "JavaScript"> 

/< 定义 函数 * / 

function clickme (str) { 

alert (str+ "按钮 被 单 击 "); 

} 
</script> 
< /head> 
<body> 
<input type= "button" onclick= "clickme ('this') " value=" 单 击 我 "> 
<input type= "button" onclick= "clickme ('that') " value=" 单 击 我 "> 
< /body> 
</html> 


将 以 上 HTML 文件 保存 为 “按钮 被 单 击 . html” ,使 用 浏览 器 打开 ,分 别 单 击 两 个 按 
钮 ,观察 弹出 对 话 框 中 显示 的 信息 。 


4. 知识 运用 


在 以 上 HTML 页 面 的 主体 部 分 ,为 两 个 按钮 添加 name 属性 , 取 值 分 别 为 “button1” 
和 “button2”, 并 将 按钮 的 name 属性 作为 实 参 调用 clickme() 函 数 ,在 clickme() 函 数 中 弹 
出 对 话 框 , 对 话 框 中 显示 提示 信息 : 按钮 name 属性 值 十 “被 单 击 ”。 按 钮 被 单 击 后 弹出 的 
对 话 框 如 图 7.6 所 示 。 




















图 7.6 按钮 被 单 击 后 弹出 的 对 话 框 
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79 事件 和 事件 处 理 


7.9.1 JavaScript 常用 事件 


在 JavaScript 中 ,事件 是 指 Web 页 面 在 浏览 器 处 于 活动 状态 时 发 生 的 各 种 事情 ,也 
就 是 用 户 与 Web 页 面 交互 时 产生 的 各 种 操作 ,如 浏览 器 加 载 、 卸 载 一 个 页 面 , 用 户 单 击 鼠 
标 、 移 动 鼠标 ,以 及 按 下 键盘 中 的 某 个 键 。 

浏览 器 为 了 响应 某 个 事件 而 进行 的 处 理 过 程 叫 作 事件 处 理 , 这 个 处 理 程序 叫 作 事件 
处 理 函数 。 对 事件 的 处 理 , 一 般 都 是 通过 调用 相应 的 事件 处 理 函 数 完成 的 。 事件 调 用 欣 
数 的 格式 通常 为 


on 事件 名 = 事件 处 理 函 数 
常用 的 JavaScript 事件 见 表 7. 4。 
表 7.4 常用 的 JavaScript 事件 





















































事件 调用 函数 何 时 触发 支持 的 页 面 元 素 

onClick 鼠标 单 击 时 所 有 元 素 

onDblClick 鼠标 双击 时 所 有 元 素 
<input type= "text">, <input type 一 

onChange 域 的 内 容 改 变 时 "radio">, <input type="checkbox">， 
<select>, <textarea> 

onFocus 窗口 或 元 素 获得 焦点 时 所 有 元 素 

onBlur 窗口 或 元 素 失 去 焦点 时 所 有 元 素 

onSelect 文本 被 选中 时 < 一 input type= "text">, <textarea> 

onMouseDown 鼠标 上 的 按钮 被 按 下 时 所 有 元 素 

onMouseOver 鼠标 移动 到 某 范 围 内 时 所 有 元 素 

onMouseOnut 鼠标 离开 某 范围 内 时 所 有 元 素 

onMouseMove 鼠标 移动 时 所 有 元 素 

onMouseEnter 鼠标 进入 某 范围 内 时 所 有 元 素 

onMouseLeave 鼠标 离开 某 范围 内 时 所 有 元 素 

onKeyDown 某 个 键盘 按键 被 按 下 所 有 元 素 

onKeyPress 某 个 键盘 按键 被 按 下 并 松 开 所 有 元 素 

onKeyUp 某 个 键盘 按键 被 松 开 所 有 元 素 
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续 表 
事件 调用 函数 何 时 触发 支持 的 页 面 元 素 
文档 、 图 像 ,或 对 象 全 部 加 载 完 
毕 时 (全 部 加 载 完毕 意味 着 不 但 | 二 body ,二 frame >， 到 frameset 过， 
onLoad HTML 文件 加 载 完 毕 ,而 且 包 含 | 一 iframe> ,二 img 二 ,一 link> ,二 script 二 ， 
的 图 片 .插件 、 空 间 、 小 程序 等 全 | 二 object> 
部 加 载 完 毕 ) 
onUnload 人 HIN ed en 
onSubmit 表单 提交 时 <form> 
onReset 表单 重 置 按钮 被 单 击 时 <form> 
onResize 当 窗 口 被 调整 大 小 时 所 有 元 素 
发 生 错 误 时 ,其 事件 处 理 程序 通 
onError 常 叫 作 “ 错 误 处 理 程序 (Error | 所 有 元 素 


Handler)”, 用 来 处 理 错误 








需要 注意 的 是 ,onMouseEnter 事件 类 似 于 onMouseOver 事件 ,唯一 的 区 别 是 
onMouseEnter 事件 不 支持 冒 泡 ,也 就 是 说 , 当 鼠 标 指针 进入 某 元 素 时 ,会 触发 
onMouseOver 事件 和 onMouseEnter 事件 ,并 且 在 这 个 元 素 的 所 有 子 元 素 上 也 会 触发 
onMouseOver 事件 ,但 不 会 触发 子 元 素 的 onMouseEnter 事件 。onMouseLeave 和 
onMouseOut 事件 的 区 别 和 上 面 的 情况 类 似 , 这 里 不 再 袭 述 。 


7.9.2 项 目 : 敏感 的 兔子 
1. 项 目 说 明 


完成 JavaScript 的 事件 声明 和 事件 处 理 程序 。 在 页 面 上 放置 图 片 ,并 利用 Div 十 CSS 
在 图 片上 划分 出 4 个 区 域 , 要 求 ， 

左上 角 区 域 响应 鼠标 进入 事件 , 当 鼠 标 进 入 该 区 域 时 ,弹出 对 话 框 ,显示 “ 离 我 远 点 
儿 ”， 

右上 角 区 域 响应 鼠标 悬浮 事件 , 当 鼠 标 在 区 域 上 方 悬 浮 时 ,弹出 对 话 框 ,显示 ”不 要 
摸 我 1”， 

左下 角 区 域 响应 鼠标 单 击 事件 , 当 鼠 标 在 区 域 中 单 击 时 ,弹出 对 话 框 ,显示 “ 谁 
打 我 ?”; 

右 下 角 区 域 响 应 鼠标 双击 事件 , 当 鼠 标 在 区 域 中 双击 时 ,弹出 对 话 框 ,显示 “ 谁 打 我 
两 和 下? 

另外 ,在 该 页 面 主体 部 分 ,响应 键盘 按键 事件 , 当 有 和 键 按 下 时 ,弹出 对 话 框 ,显示 该 键 
的 键盘 码 。 

运行 效果 如 图 7.7 所 示 。 
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7.7 鼠标 进入 左上 角 区 域 时 弹出 的 对 话 框 


2. 项 目 设计 


本 项 目 要 完成 一 个 简单 的 JavaScript 的 事件 响应 和 处 理 功 能 。 当 用 户 与 Web 页 面 
进行 某 种 行为 的 交互 时 ,会 发 生 事件 。 事 件 可 能 是 鼠标 在 某 些 HTML 元 素 上 的 单 击 、 鼠 
标 经 过 某 个 元 素 或 按 下 键盘 上 的 某 些 按键 等 。 事 件 还 可 能 是 浏览 器 中 发 生 的 事情 ,如 某 
个 Web 页 面 加载 完 成 ,或 者 是 用 户 改变 窗 口 大 小 等 。 通 过 使 用 JavaScript, 可 以 监听 某 种 
特定 事件 的 发 生 ,并 规定 在 某 些 事件 发 生 后 对 这 些 事件 做 出 响应 。 

本 项 目 就 是 要 监听 鼠标 对 页 面 上 的 指定 元 素 的 鼠标 进入 .悬浮 . 单 击 `. 双 击 和 键盘 事 
件 , 并 在 发 生 某 个 特定 事件 后 进行 规定 的 响应 处 理 操 作 。 因 此 ,在 本 项 目 中 要 实现 的 是 一 
个 完整 的 事件 响应 处 理 流程 。 在 事件 源 上 ,指定 鼠标 进入 ` 悬 浮 . 单 击 ` 双击 和 键盘 事件 的 
事件 处 理 函数 ,并 使 用 JavaScript 编写 这 些 事件 处 理 函数 ,在 其 中 完成 具体 的 事件 响应 处 
理 操作 。 

在 本 项 目 中 利用 JavaScript 的 常用 事件 (如 onMouseEnter、onMouseOver、onClick、 
onDblClick 和 onKeyPress 等 事件 ) 编 写 其 事件 处 理 函数 ,完成 不 同 的 用 户 行为 响应 。 

(1) 为 左上 角 区 域 的 二 div 二 标签 添加 onMouseEnter 事件 .并 指定 事件 处 理 代码 是 
“alert( 离 我 远 点 儿 7”。 

(2) 为 右上 角 区 域 的 二 div 二 标签 添加 onMouseOver 事件 ,并 指定 事件 处 理 代 码 是 
“alert( 不 要 摸 我 1)”。 

(3) 为 左下 角 区 域 的 天 div 之 标签 添加 onClick 事件 ,并 指定 事件 处 理 代 码 是 “alert 
( 谁 打 我 ?)”。 

(4) 为 右 下 角 区 域 的 二 div 二 标签 添加 onDblClick 事件 ,并 指定 事件 处 理 代码 是 
“alert(' 谁 打 我 两 下 ?7 ”。 

(5) 为 页 面 主体 一 body 二 标签 添加 onKeyPress 事件 并 指定 事件 处 理 函 数 是 fun()， 
传递 了 event 对 象 作为 参数 (event 对 象 是 DOM 对 象 中 用 于 代表 事件 的 状态 的 对 象 ,会 
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在 第 9 章 详细 介绍 )。 
3. 项 目 实施 
本 项 目 代码 如 下 。 


<html> 

<head> 

<style> 
#main{margin:0 auto; width:400px;height:400px;position:relative;} 
:box{width:180px;height:180px;opacity:0.2;background:#99FF00;position:absolute;} 
#boxl{left:60px;top:30px;} 
#box2{left:250px;top:30px;} 
#box3{left:60px;top:220px;} 
#box4{left:250px;top:220px;} 

</style> 

<script> 
function fun(e){ 

alert (e.keyCode); 

} 

</script> 

< /head> 

<body onKeyPress= "fun (event)"> 

<div id= "main"> 
< imgsrc="../images/IMG 2755.JPG" border="0" alt=""> 
<div id= "boxl" class= "box"” onMouseEnter="alert (' 离 我 远 点 儿 ')"> 和 鼠标 进入 
</div> 
<div id= "box2" class= "box" onMouseOver= "alert ('" 不 要 摸 我 !')"> 鼠 标 悬 浮 
</div> 
<div id= "box3"class= "box" onClick= "alert(" 谁 打 我 ?")"> 鼠标 单 击 < /div> 
<div id= "box4" class= "box" onDblclick= "alert(" 谁 打 我 两 下 ?") "> 鼠标 双击 
</div> 

</div> 

< /body> 

</htm> 


将 以 上 HTML 文件 保存 为 “敏感 的 兔子 . html” ,使 用 浏览 器 打开 ,分 别 使 用 鼠标 在 
不 同 区 域 移动 或 单 击 ,观察 弹出 的 对 话 框 显示 的 信息 。 按 下 键盘 上 的 按键 ,观察 弹出 的 对 
话 框 显示 的 信息 。 


4. 知识 运用 


el 


在 以 上 HTML 页 面 的 主体 部 分 ,为 图 片 标签 二 img 记 添加 图 像 加 载 完毕 事件 和 事件 
处 理 函 数 , 当 图 片 加 载 完 毕 时 ,弹出 对 话 框 ,显示 “我 来 了 ”。 在 图 片 下 方 添 加 一 个 单行 文 
本 框 ,为 文本 框 添加 文本 内 容 改 变 事 件 和 事件 处 理 函 数 , 当 文 本 框 中 的 内 容 发 生 改 变 并 失 
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去 焦点 时 ,弹出 对 话 框 ,显示 “你 写 了 什么 ?”, 效 果 如 图 7.8 所 示 。 














你 好 


图 7.8 图 片 加 载 完 毕 时 弹出 的 对 话 框 以 及 文本 框 内 容 改 变 时 弹出 的 对 话 框 














习 题 


1. 分 析 下 面 的 JavaScript 代码 : 

x=11; 

y= "number"7 

xty; 

m 的 值 为 (。 )。 

A. llnumber B. number C. 11 D. 程序 报错 
2. 在 HTML 页 面 中 使 用 外 部 JavaScript 文件 的 正确 语法 是 (。”)。 

A. =language= "JavaScript"src= "scriptfile. js"> 

B. =script language= "JavaScript"src= "scriptfile. js">=/script> 

C. =script language= "JavaScript" = scriptfile. js><=/script> 

D. = languagesrc 一 ”scriptfile. js"> 
3. 运行 如 下 的 JavaScript 代码 段 ,页 面 上 输出 (  ”)。 

var c="10",d=10; 

document .write (c+ d) 

A. 10 B. 20 C. 1010 D. 页 面 报错 
4. 在 网 页 编程 中 运行 下 面 的 JavaScript 代码 : 

<script> 

X=3; 

2; 

z= (zx+ 2)/y; 
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alert (z); 
</script> 
提示 框 中 会 显示 (  )。 
A,2 B. 2:5 入 D. 16 


5. 当前 页 面 的 同一 目录 下 有 一 名 为 show. js 的 文件 ,代码 ( ) 可 以 正确 访问 该 
wa 
A. =script language= "show. js">=/script> 
B. =script type= "show.js"></script> 
C. =script src="show.js"><=/script> 
D. =script runat= "show.js"><=/script> 
6. 分 析 下 面 的 JavaScript 语句 : 


Str= "This apple costs "+5 0.57 


执行 该 语句 后 str 的 结果 是 ( )。 
A. This apple costs 50.5 B. This apple costs 5.5 
C. "This apple costs”50. 5 D. "This apple costs "5.5 
7. 要 求 用 JavaScript 实现 如 下 功能 : 一 个 文本 框 中 的 内 容 发 生 改变 后 , 单 击 页 面 中 
的 其 他 部 分 将 弹出 一 个 消息 框 显示 文本 框 中 的 内 容 。 下 面 语句 正确 的 是 ( 
A. =input type= "text" onChange= "alert(this. value) "一 
B. =input type= "text" onClick= "alert(this. value)"> 
C. <input type= "text" onChange= "alert(text. value) "> 
D. =input type= "text" onClick= "alert(value)"> 
8. 分 析 下 面 的 JavaScript 代码 段 : 
function employee (name, code) 
{ 
this.name= "wangli"; 
this.code= "A001"; 
} 
newemp= new employee ("zhangming", 'A002'); 
document .write ("雇员 姓名 :"+newemp.name+ "<br>"); 
document .write ("雇员 代号 :"+newemp.codet+ "<br>"); 


输出 的 结果 是 ( Ws 
A. 雇员 姓名 :wangli 雇员 代码 :A001 
B. 雇员 姓名 : zhangming 雇员 代码 : A002 
C. 雇员 姓名 : null, 雇员 代码 : null 


D. 代码 有 错误 ,无 输出 结果 
:3 ) 为 JavaScript 声明 变量 的 请 句 。 
A. dim x; B. int x; C. var xs Dy xi 


10. 分 析 如 下 的 JavaScript 代码 片段 , b 的 值 为 ( Vs 


iMLS+cSSs+Javasiript 昼 四 用 网 



























Var a=1.5,b; 
b=parseInt (a); 
A. 2 Bs | WW 1 
11. 声明 一 个 对 象 , 给 它 加 上 name 属性 和 show 方法 显示 其 name 值 ,以 下 代码 中 正 
确 的 是 ( 站 
A. var obj 王 [name:"zhangsan" ,show:function(){alert(name);}]; 
B. var obj= {name:"zhangsan" ,show:”alert(this. name)”}; 
C. var obj= {name:"zhangsan" ,show:function(){alert(name);}}; 
D. var obj= {name:"zhangsan" ,show:function() {alert(this. name);)}; 
12. 使 用 JavaScript 向 网 页 中 输出 二 hl 之 hello 一 /hl 二 ,以 下 代码 中 可 行 的 是 ( ) 
和 ( Ws 
A. =script type= "text/javascript"> 
document. write(<hl>hello</hl>); 
</script> 
B. =script type= "text/javascript" > 
document. write("<hl>hello</hl>"); 
</script> 
C. =script type= "text/javascript"> 
<hl>hello</hl> 
</script> 
BD < 
<script type= "text/javascript"> 
document. write( "hello"); 
</script> 
</hl> 


Ges BE) x 
zB 


JavaScript 对 象 

本 章 概述 

通过 本 章 的 学 习 , 学 会 使 用 JavaScript 的 内 置 对 象 `BOM 对 象 的 常用 方法 ,编写 
JavaScript 动态 网 页 效果 ,学 习 如 何 使 用 JavaScript 控制 客户 端 行为 。 通 过 JavaScript 实 
际 案例 的 编写 过 程 ,学 习 JavaScript 语言 的 编程 思路 和 编程 经 验 。 

学 习 重点 与 难点 

重点 : 

(1) Math 对 象 .Date 对 象 ,String 对 象 .Number 对 象 \,Array 对 象 的 属性 和 方法 。 

(2) JavaScript 的 BOM 对 象 常见 属性 和 方法 的 使 用 。 

难点 : 

(1) JavaScript 内 置 对 象 的 使 用 。 

(2) window 对 象 .document 对 象 的 常见 属性 和 方法 的 使 用 。 

重点 及 难点 学 习 指导 建议 : 

。 通过 大 量 的 编程 练习 记忆 JavaScript 中 的 常用 BOM 对 象 的 方法 。 

。 独立 完成 每 个 章节 中 的 知识 运用 部 分 ,体会 使 用 到 的 知识 点 的 具体 作用 。 
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8.1.1 认识 JavaScript 内 置 对 象 

JavaScript 的 一 个 重要 特点 就 是 它 是 一 种 面向 对 象 的 语言 。 通 过 基于 对 象 的 程序 设 
计 , 可 以 用 更 直观 ,模块 化 和 可 重复 使 用 的 方式 进行 程序 开发 。 

一 组 包含 数据 的 属性 和 对 属性 中 包含 的 数据 进行 操作 的 方法 称 为 对 象 。 例 如 ,要 设 
定 网 页 的 背景 颜色 ,针对 的 对 象 就 是 document, 所 用 的 属性 名 是 bgcolor。 例 如 ， 
document. bgcolor 王 "blue" ,就 是 设置 背景 的 颜色 为 蓝 色 。 

JavaScript 中 支持 的 对 象 主要 有 以 下 4 种 。 


1. 内 置 对 象 

JavaScript 将 一 些 常用 的 功能 预先 定义 成 对 象 ,用 户 可 以 直接 使 用 ,这 种 对 象 就 是 内 
置 对 象 。 

2. 浏览 器 对 象 

。 网 页 和 浏览 器 本 身 的 各 种 元 素 在 JavaScript 程序 中 的 体现 。 

。 它 使 JavaScript 可 以 定位 改变 内 容 以 及 展示 HTML 页 面 的 所 有 元 素 。 

3. DOM 对 象 


HTML DOM 对 象 定义 了 用 于 HTML 的 一 系列 标准 的 对 象 , 以 及 访问 和 处 理 
HTML 文档 的 标准 方法 。 


4. 自 定义 对 象 


JavaScript 允许 用 户 自 定义 对 象 进 行使 用 。 

本 节 主 要 介绍 常用 的 内 置 对 象 。 

在 JavaScript 中 ,内 置 对 象 都 有 自己 的 方法 和 属性 ,访问 其 属性 的 语法 是 “对 象 名 . 属 
性 名 ”。 访 问 其 方法 的 语法 是 “对 象 名 . 方法 名 称 ( 参 数列 表 )”。 

常用 的 内 置 对 象 见 表 8. 1 。 


表 8.1 常用 的 内 置 对 象 








对 象 名 描 述 
Math 数学 对 象 ,提供 了 进行 所 有 基本 数学 计算 的 功能 和 常量 的 属性 和 方法 
Date 日 期 对 象 ,提供 了 获取 、 设 置 日 期 和 时 间 的 属性 和 方法 





String 字符 串 对 象 ,提供 了 对 字符 串 进行 处 理 的 属性 和 方法 
Array 数组 对 象 , 用 来 描述 数组 并 提供 数组 处 理 的 属性 和 方法 
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8.1.2 Math 对 象 
内 置 的 Math 对 象 可 以 用 来 处 理 各 种 数学 运算 ,其 中 定义 了 一 些 常 用 的 数学 常数 和 


运算 方法 。Math 的 





属性 和 方法 可 以 直接 调用 ,其 语法 格式 为 


。 Math. 属性 名 
。 Math. 函数 名 (参数 列表 ) 
Math 对 象 的 常用 属性 和 方法 见 表 8. 2。 


表 8.2 Math 对 象 的 常用 属性 和 方法 
















































































属性 名 /方法 名 描 述 
LN2 2 的 自然 对 数 ( 约 0. 693) 
LN10 10 的 自然 对 数 ( 约 2. 302) 
LOG2E 以 2 为 底 的 e 的 对 数 ( 约 1. 442) 
常用 属性 LOG10E 以 10 为 底 的 e 的 对 数 ( 约 0.434) 
PI 数学 PI 值 3.1415926 
SQRT1_2 0. 5 的 平方 根 ( 约 0.707) 
SQRT2 2 的 平方 根 ( 约 1. 414) 
abs(x) 返回 数字 x 的 绝对 值 
acos(x) 返回 数字 x 的 反 余弦 值 
asin(X) 返回 数字 x 的 反正 弦 值 
atan(x) 返回 位 于 一 PI/2 和 PI/2 的 反正 切 值 
atan2(y,X) 返回 (x,y) 位 于 一 PI 到 PI 之 间 的 角度 
ceil(x) 返回 x 四 会 五 人 后 的 最 大 整数 
cos(x) 返回 数字 x 的 余弦 值 
exp(x) 返回 E* 值 
floor(x) 返回 x 的 截 尾 取 整 结果 
常用 方法 log(x) 返回 底数 为 EE 的 自然 对 数 
max(x,y) 返回 x 和 y 之 间 较 大 的 数 
min(x,y) 返回 x 和 y 之 间 较 小 的 数 
pow(x»,y) 返回 严 的 值 
random() 返回 位 0 一 1 的 随机 函数 
round(x) 四 舍 五 人 后 取 整 
sin(x) 返回 数字 x 的 正弦 值 
sqrt(x) 返回 数字 x 的 平方 根 
tan(x) 返回 数字 x 的 正切 值 
valueOf() 返回 数学 对 象 的 原始 值 
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例如 : 四 舍 五 人 取 整 。 


document .write (Math.round (0.60)+ "<br />")//1 
document .write (Math.round (0.50)+ "<br />")//1 
document .write (Math.round (0.49)+ "<br />")//0 
document .write (Math.round(- 4.40)+"<br />")//-4 
document .write (Math.round(- 4.60)+"<br />")//-5 


例如 : 产生 一 个 1 一 16 的 随机 数 ,包含 1 和 16。 


var n=Math. floor (Math.random() * 16)+1; 
8.1.3 Date 对 象 
1. Date 对 象 的 创建 
Date 对 象 用 来 对 日 期 和 时 间 进 行 操作 , 它 的 大 多 数 方法 需要 利用 对 象 调用 ,因此 必 


须 先 声明 和 创建 Date 对 象 。 必 须 使 用 new 运算 符 创 建 一 个 实例 。 语 法 格式 如 下 。 


var 对象 名 =new Date() (表示 当前 的 日 期 和 时 间 ) 
var 对 象 名 =new Date (年 ,月 ,日 ) 

var 对 象 名 =new Date (年 ,月 ,日 ,时 ,分 , 秒 ) 

var 对象 名 =new Date( 年 ,月 ,日 ,时 :分 : 秒 ) 


例如 : 
var someday=new Date ("February 26,2005 12:00:00"); // 月 日 ,年 时 :分 : 秒 
Var someday=new Date (2009, 4, 7, 0, 0, 0); // 年 ,月 ,日 ,时 ,分 , 秒 


其 中 ,年 月 .日 均 为 必 填 参数 ,而 时 、 分 、 秒 为 可 选 参数 。 

2. Date 对 象 的 属性 

Date 对 象 没有 提供 可 以 直接 访问 的 属性 ,只 有 获取 和 设置 日 期 和 时 间 的 方法 。 
3. Date 对 象 的 方法 


Date 对 象 主要 提供 了 以 下 3 类 方法 。 

(1) 从 系统 中 获得 当前 的 时 间 和 日 期 。 
(2) 设置 当前 的 日 期 和 时 间 。 

(3) 在 时 间 .日 期 同 字符 串 之 间 完 成 转换 。 
Date 对 象 的 常用 方法 见 表 8. 3 。 


表 8.3 Date 对 象 的 常用 方法 














方 法 名 描 述 
getDay() 返回 一 周 中 的 第 几 (0 一 6) 天 
getYear() 返回 当前 年 份 。2000 年 以 前 为 2 位 ,2000( 包 含 ) 年 以 后 为 4 位 
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续 表 
方法 名 描述 
getFullYear() 返回 完整 的 4 位 年 份 数 
getMonth() 返回 当前 月 (1 一 12) 
getDate() 返回 当前 日 (1 一 31) 
getHours() 返回 当前 小 时 数 (0 一 23) 
getMinutes() 返回 当前 分 钟 数 (0 一 59) 
getSeconds() 返回 当前 秒 数 (0 一 59) 
getMilliseconds() 返回 当前 毫秒 数 (0 一 999) 
getUTCDay() 依据 国际 时 间 得 到 现在 是 星期 几 (0 一 6) 
getUTCFullYear() 依据 国际 时 间 得 到 完整 的 年 份 
getUTCMonth() 依据 国际 时 间 得 到 当前 月 份 (1 一 12) 
getUTCDate() 依据 国际 时 间 得 到 当前 日 (1 一 31) 
getUTCHours() 依据 国际 时 间 得 到 当前 小 时 数 (0 一 23) 
getUTCMinutes() 依据 国际 时 间 返 回 当前 分 钟 数 (0 一 59) 
getUTCSeconds() 依据 国际 时 间 返 回 秒 数 (0 一 59) 
getUTCMilliseconds() 依据 国际 时 间 返 回 毫秒 数 (0 一 999) 





getTime() 


返回 从 1970 年 1 月 1 号 0:0:0 到 现在 一 共 花 去 的 毫秒 数 





getTimezoneoffset() 


返回 时 区 偏差 值 , 即 格林 尼 治 平均 时 间 (GMT) 与 运行 脚本 的 计算 机 


所 处 时 区 设置 之 间 相 差 的 分 钟 数 





parse( dateString) 


返回 在 Date 字符 串 中 自 1970 年 1 月 1 日 00:00:00 以 来 的 毫秒 数 
(parse 方法 是 Date 对 象 的 静态 方法 ,可 以 通过 Date 类 直接 调用 ,而 
不 是 使 用 一 个 Date 类 的 对 象 调 用 )。 其 中 , 短 日 期 可 以 使 用 “/” 或 
“-” 作 为 日 期 分 隔 符 ,但 是 必须 按 “ 月 /日 /年 ”的 顺序 表示 。 以 “月 名 
称 日 年 ”的 形式 表示 长 日 期 ,例如 “July 08 2008”, 年 份 值 可 以 用 2 
位 数字 表示 ,也 可 以 用 4 位 数字 表示 。 如 果 使 用 2 位 数字 表示 年 份 ， 
那么 该 年 份 必须 大 于 或 等 于 70。 小 时 ,分 钟 秒 钟 之 间 用 冒号 分 隔 , 这 
3 项 不 是 必需 都 指明 。 例 如 ,"12:""12:10" "12:10:11" 都 是 有 效 的 

















setYear(yearInt) 设置 年 份 ,2 位 数 或 4 位 数 
setFullYear(yearInt) 设置 年 份 ,4 位 数 
setMonth(monthInt) 设置 月 份 (1 一 12) 
setDate(dateInt) 设置 日 (1 一 31) 
setHours(hourInt) 设置 小 时 数 (0 一 23) 





setMinutesCminInt) 


设置 分 钟 数 (0 一 59) 





setSeconds(secInt) 





设置 秒 数 (0 一 59) 
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续 表 
记 证 者 描述 
setMilliseconds(milliInt) 设置 毫秒 数 (0 一 999) 
setUTCFullYear(yearInt) 依据 国际 时 间 设 置 年 份 
setUTCMonth(monthInt) 依据 国际 时 间 设置 月 (1 一 12) 
setUTCDate( dateInt) 依据 国际 时 间 设 置 日 (1 一 31) 
setUTCHours(hourInt) 依据 国际 时 间 设 置 小 时 数 
setUTCMinutes(minInt) 依据 国际 时 间 设 置 分 钟 数 
setUTCSeconds(secInt) 依据 国际 时 间 设 置 秒 数 
setUTCMillisecondsCmilliInt) | 依据 国际 时 间 设置 毫秒 数 





setTime(timeInt) 


设置 从 1970 年 1 月 1 日 开始 的 时 间 , 单 位 为 毫秒 数 





toGMTString() 


根据 格林 尼 治 时 间 将 Date 对 象 的 日 期 (一 个 数值 ) 转 变 成 一 个 GMT 
时 间 字 符 串 ,如 :Weds,15 June 1997 14:02:02 GMT 





toUTCString() 


根据 通用 时 间 将 一 个 Date 对 象 的 日 期 转换 为 一 个 字符 串 





toLocaleString() 


把 Date 对 象 的 日 期 (一 个 数值 ) 转 变 成 一 个 字符 串 ,使 用 所 在 计算 机 
上 配置 使 用 的 特定 日 期 格式 





toString() 


将 日 期 对 象 转换 为 字符 串 





UTC(yyyy, mm, dd, hh, mm, 


ss,msec) 


返回 从 格林 尼 治 标准 时 间 到 指定 时 间 的 差距 ,单位 为 毫秒 





valueOf() 


8.1.4 String 对象 





返回 日 期 对 象 的 原始 值 


在 JavaScript 中 ,一 个 字符 串 是 一 个 对 象 。String 对 象 提供 给 特定 的 字符 串 完成 各 
种 处 理 的 属性 与 方法 ,如 搜索 字符 串 、 提 取 子 串 等 。 


1. String 对 象 的 创建 


字符 串 变 量 的 初始 化 通常 有 以 下 两 种 方式 。 
。 声明 字符 串 变 量 时 直接 为 其 赋值 。 例 如 : 


Var str= "Hello World"; 


。 使 用 new 关键 字 创 建 字符 串 对 象 并 在 构造 函数 中 提供 初始 化 参数 。 例 如 : 


Var str=new String ("Hello World"); 


2. String 对 象 的 属性 


String 对 象 只 有 一 个 属性 length ,表示 字 符 串 的 长 度 。 
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例如 : 


弟 秘 ” (asstrpi 叶 外 


MyStr= "hello JavaScript World"7 


length=MyStr.length; 


3. String 对 象 的 方法 


String 对 象 的 方法 主要 用 于 对 有 关 字 符 串 在 Web 页 面 中 的 显示 、 字 体 大 小 、 字 体 颜 
色 , 字 符 搜 索 以 及 字符 的 大 小 写 转换 等 , 见 表 8. 4。 


表 8.4 String 对象 的 方法 

















属性 名 /方法 名 描 述 
anchor() 创建 书签 链接 ,相当 于 二 A name 一 . . > 
big() 把 字符 串 中 的 文本 变 成 大 字体 (二 BIG 二 ) 
blink() 把 字符 串 中 的 文本 变 成 闪烁 字体 (<BLINK>) 
boldO) 把 字符 串 中 的 文本 变 成 黑 字 体 ( 和 <B>) 
fixed() 把 字符 串 中 的 文本 变 成 固定 间距 字体 , 即 电报 形式 (<TT>) 





fontcolor(color) 


设置 字符 串 中 文本 的 颜色 (FONT COLOR=) 





fontsize(size) 


把 字符 串 中 的 文本 变 成 指定 大 小 (二 FONTSIZE 一 二 ) 





italics() 


把 字符 串 中 的 文本 变 成 斜 字体 (<I) 




















linkCurl) 创建 超 链 接 , 相 当 于 a href 一 . .过 

small() 把 字符 串 中 的 文本 变 成 小 字体 (和 SMALL>) 

strike() 把 字符 串 中 的 文本 变 成 划 掉 字体 (<STRIKE>) 

sub() 把 字符 串 中 的 文本 变 成 下 标 (subscript) 字 体 (<SUB>) 
sup() 把 字符 串 中 的 文本 变 成 上 标 (superscript) 字 体 ( 二 SUP>) 
charAt(index) 返回 指定 索引 处 的 字符 





charCodeAt(index) 


返回 一 个 整数 ,该 整数 表示 String 对 象 中 指定 位 置 处 的 字符 的 
Unicode 编码 





concat(newStringl ,** , newStringN) 


连接 两 个 或 多 个 字符 串 





indexOf(searchString) 


返回 字符 串 中 第 一 个 出 现 指定 字符 串 searchString 的 位 置 





lastlndexOf(searchString) 


返回 字符 串 中 最 后 一 个 出 现 指定 字符 串 searchString 的 位 置 





replace(regex, newString) 


将 字符 串 中 的 某 些 字符 regex 替换 成 其 他 字符 newString 





slice(startIndex,endIndex) 


将 部 分 字符 抽出 并 在 新 的 字符 串 中 返回 剩余 部 分 





split(delimiter) 


将 字符 串 分 配 为 数组 





substr(startIndex,length) 


从 startIndex 位 置 取 子 串 , 取 length 个 字符 





substring(startIndex,endIndex) 





startIndex 和 endIndex 之 间 的 字符 ,不 包括 endIndex 位 置 的 字符 
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续 表 
属性 名 /方法 名 描 述 

toLowerCase() 把 字符 串 中 的 所 有 字符 变 成 小 写 
toUpperCase() 把 字符 串 中 的 所 有 字符 变 成 大 写 
valueOf() 返回 字符 串 对 象 的 原始 值 

例如 : 

Var txt= "Hello world!™" 

document .write (txt.length) // 输 出 12 


Var txt="Hello world!" 
document .write (txt .toUpperCase ()) // 输 出 HEELIO WORLD! 


Var str="Hello world!" 


document .write (str.indexOf ("Hello")+ "<br />") // 输 出 0 
document .write (str.indexOf ("World")+ "<br />") // 没 有 World, 输 出 -1 
document .write (str.indexOf ("world") ) // 输 出 6 


例如 : 指定 字符 串 显示 为 红色 字 。 


< script type= "text/javascript"> 

Var str="Hello world!" 

document .write (str.fontcolor ("Red")) 
</script> 


例如 : 将 字符 串 显示 成 超 链接 。 


<script type= "text/javascript"> 

Var str= "Free Web Tutorials!" 

document .write (str.link ("http://www.w3school.com.cn")) 
</script> 


8.1.5 Number 对 象 
Number 对 象 是 原始 数值 的 包装 对 象 。 
1. 创建 Number 对 象 


Var myNum= new Number (value) 
Var myNum= Number (value); 


参数 value 是 要 创建 的 Number 对 象 的 数值 ,或 是 要 转换 成 数字 的 值 。 

当 Number( ) 和 运算 符 new 一 起 作为 构造 函数 使 用 时 , 它 返 回 一 个 新 创建 的 
Number 对 象 。 如 果 不 用 new 运算 符 , 把 Number() 作 为 一 个 函数 调用 , 它 将 把 自己 的 参 
数 转换 成 一 个 原始 的 数值 ,并 且 返 回 这 个 值 ( 如 果 转 换 失 败 , 则 返回 NaN)。Number 对 象 
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属性 见 表 8. 5。 
表 8.5 Number 对 象 属性 
属 性 描 述 
constructor 返回 对 创建 此 对 象 的 Number 函数 的 引用 
MAX_VALUE 可 表示 的 最 大 的 数 
MIN_VALUE 可 表示 的 最 小 的 数 
NaN 非 数字 值 
NEGATIVE_INFINITY 负 无 穷 大 ,溢出 时 返回 该 值 
POSITIVE_INFINITY 正 无 穷 大 ,溢出 时 返回 该 值 
prototype 有 能 力 向 对 象 添加 属性 和 方法 





Number 对 象 方法 见 表 8. 6。 
表 8.6 ”Number 对 象 方法 




















为 ， 凌 描述 
toString 把 数字 转换 为 字符 串 ,使 用 指定 的 基数 
toLocaleString 把 数字 转换 为 字符 串 , 使 用 本 地 数字 格式 顺序 
toFixed 把 数字 转换 为 字符 串 ,结果 的 小 数 点 后 有 指定 位 数 的 数字 
toExponential 把 对 象 的 值 转换 为 指数 计数 法 
toPrecision 把 数字 格式 化 为 指定 的 长 度 
valueOf 返回 一 个 Number 对 象 的 基本 数字 值 





2. Number 对 象 描述 


在 JavaScript 中 ,数字 是 一 种 基本 的 数据 类 型 。JavaScript 还 支持 Number 对 象 ,该 
对 象 是 原始 数值 的 包装 对 象 。 必 要 时 .JavaScript 会 自动 在 原始 数据 和 对 象 之 间 转 换 。 
在 JavaScript 1.1 中 ,可 以 用 构造 函数 Number() 明 确 创建 一 个 Number 对 象 , 尽 管 这 样 
做 并 没有 什么 必要 。 

构造 函数 Number() 可 以 不 与 运算 符 new 一 起 使 用 ,而 直接 作为 转化 函数 使 用 。 以 
这 种 方式 调用 Number() 时 , 它 会 把 自己 的 参数 转化 成 一 个 数字 ,然后 返回 转换 后 的 原始 
数值 (或 NaN)。 

构造 函数 通常 还 用 作 5 个 有 用 的 数字 常量 的 占 位 符 , 这 5 个 有 用 的 数字 常量 分 别 是 
可 表示 的 最 大 数 、 可 表示 的 最 小 数 、 正 无 穷 大 、 负 无 穷 大 和 特殊 的 NaN 值 。 注 意 ,这 些 值 
是 构造 函数 Number() 自 身 的 属性 ,而 不 是 单独 的 某 个 Number 对 象 的 属性 。 

例如 ,这 样 使 用 属性 MAX_VALUE 是 正确 的 : 





Var big=Number .MAX VALUE 
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但 是 这 样 使 用 属性 MAX_VALUE 是 错误 的 。 
Var n=new Number (2); 
Var big=n.MAX VALUE 


作为 比较 ,我 们 看 一 下 toString() 和 Number 对 象 的 其 他 方法 ,它们 是 每 个 Number 
对 象 的 方法 ,而 不 是 NumberO 〇 构造 函数 的 方法 。 前 面 提 到 过 ,必要 时 ,JavaScript 会 自动 
把 原始 数值 转化 成 Number 对 象 ,调用 Number 方法 的 既 可 以 是 Number 对 象 ,也 可 以 是 
原始 数字 值 。 例 如 : 


Var m= 123; 
Var binary value=n.toString(2)7 


8.1.6 Array 对象 
在 JavaScript 中 ,使 用 new 和 Array 关键 字 创 建 数组 对 象 。 创 建 数 组 的 语法 有 以 下 
4 种 。 
(1) 创建 一 个 数组 。 
var 数组 对 象 名 =new Rrray(); 
(2) 创建 一 个 数组 并 指定 长 度 。 
var 数组 对 象 名 =new Array (size); 
(3) 创建 一 个 数组 并 赋 初 值 。 
var 数组 对 象 名 = new Array (element0，element1，…，elementN) ; 
(4) 创建 一 个 数组 并 赋 初 值 。 
var 数组 对 象 名 = [element0，element1，…，element]7 
需要 注意 的 是 ,虽然 第 二 种 方法 在 创建 数组 时 指定 了 长 度 , 但 实际 上 所 有 情况 下 数组 
都 是 可 变 长 的 ,也 就 是 说 ,即使 指定 长 度 为 3, 仍 然 可 以 将 元 素 存 储 在 规定 长 度 以 外 的 位 
置 ,此 时 数组 长 度 也 会 随 之 改变 。 
Array 对 象 的 常用 属性 和 方法 见 表 8. 7。 
表 8.7 Array 对 象 的 常用 属性 和 方法 
属性 名 /方法 名 描 述 
常用 属性 | length 返回 数组 的 长 度 
concat(arrayl ,*** ,arrayN) 将 两 个 或 多 个 数组 值 连接 起 来 ,合并 后 返回 结果 


2 这 将 数组 中 的 元 素 合 并 为 字符 串 ,参数 为 分 隔 符 ,如 果 省 略 参 
常用 方法 | join(delimiter) 数 , 则 直接 合并 ,不 再 分 隔 


pop() 移 除数 组 中 的 最 后 一 个 元 素 并 返回 该 元 素 
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续 表 
描 述 属性 名 /方法 名 
在 数组 的 末尾 加 上 一 个 或 多 个 元 素 , 并 且 返 回 新 的 数组 长 
push(value) 
度 值 
reverse() 颠倒 数组 中 元 素 的 顺序 , 反 向 排列 





shift() 


移 除 数组 中 的 第 一 个 元 素 并 返回 该 元 素 





slice(startIndex,endIndex) 


复制 数组 中 的 一 个 连续 部 分 ,返回 复制 的 新 数组 。slice() 方 
法 不 会 改变 原来 的 数组 





slice(startIndex, sliceCount) 


从 数组 中 分 离 一 个 子 数组 





常用 方法 


sort(compare Function) 


在 未 指定 排序 号 的 情况 下 ,按照 元 素 的 字母 顺序 排列 ,如 果 
不 是 字符 串 类 型 , 则 转换 成 字符 串 再 排序 ,返回 排序 后 的 
数组 





splice(startIndex, delCount) 


从 数组 中 移 除 元 素 ,返回 移 除 的 数组 元 素 。splice() 方 法 会 
改变 原来 的 数组 





toString() 


将 数组 中 的 所 有 元 素 返回 一 个 字符 串 ,其 间 用 逗号 分 隔 





unshift(value) 


为 数组 的 开始 部 分 加 上 一 个 或 多 个 元 素 , 并 且 返 回 该 数组 
的 新 长 度 








valueOf() 





返回 数组 对 象 的 原始 值 


例如 : sort() 方 法 用 于 对 数组 的 元 素 进行 排序 。 


< script type= "text/javascript"> 
Var arr=new Array (6) 

arr[0]= "George" 

arr[1]="John" 

arr[2]="Thomas" 

arr[3]="James" 

arr[4]= "Adrew" 

arr[5]= "Martin" 

document .write (arr+ "<br />") 
document .write (arr.sort ()) 


</script> 


输出 : 


George, John, Thomas, James, Adrew, Martin 
Adrew, George, James, John, Martin, Thomas 


例如 : push() 方 法 可 向 数组 的 末尾 添加 一 个 或 多 个 元 素 ,并 返回 新 的 长 度 。 


<ScTipt type= "text/javascript"> 
Var arr=new Array (3) 

arr[0]= "George" 

arr[1]= "John" 
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arr[2]= "Thomas" 

document .write (arr+ "<br />") 

document .write (arr.push ("James")+"<br />") 
document .write (arr) 


</script> 
输出 : 


George, John, Thomas 
4 
George, John, Thomas, James 


例如 : pop() 方 法 用 于 删除 并 返回 数组 的 最 后 一 个 元 素 。 


< Script type= "text/javascript"> 
Var arr=new Array (3) 

arr[0]= "George" 

arr[1]= "John" 

arr[2]= "Thomas" 

document .write (arr+ "<br />") 
document .write (arr.Pop ()+"<br />") 
document .write (arr) 

</script> 


输出 : 


George, John, Thomas 
Thomas 
George, John 


8.1.7 项 目 : 数字 电子 时 钟 

1. 项 目 说 明 

在 HTML 页 面 上 显示 一 个 数字 电子 时 钟 , 要 求 在 页 面 上 实现 数字 电子 时 钟 动态 显 
示 时 间 的 效果 。 数 字 电子 时 钟 效果 如 图 8. 1 所 示 。 


| occ ss p+ oS oveosearossr. *] 


文件 (月 ”编辑 (E) ”查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 





16:28:39 





图 8.1 数字 电子 时 钟 效果 
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2. 项 目 设计 


本 项 目 需要 使 用 JavaScript 的 内 置 对 象 Date 完成 读 取 系统 当前 时 间 的 功能 。 实 际 
上 ,所 有 编程 语言 都 具有 内 置 的 对 象 创建 语言 的 基本 功能 ,内 置 对 象 是 编写 自 定义 代码 的 
基础 。JavaScript 提供 了 多 种 内 置 对 象 完成 对 字符 串 、 日 期 .数值 .数组 等 数据 类 型 的 封 
装 和 操作 。 本 项 目 就 可 以 使 用 内 置 对 象 Date 完成 对 日 期 数据 的 访问 和 操作 。 

另外 ,要 实现 电子 时 钟 效果 ,需要 定时 的 周期 性 的 调用 获取 并 输出 当前 时 间 的 函数 。 
这 里 可 以 利用 window 对 象 的 方法 完成 。JavaScript 的 BOM( 浏 览 器 对 象 模型 ) 对 象 提供 
了 一 整套 与 浏览 器 进行 交互 的 方法 和 接口 ,window 对 象 就 是 BOM 对 象 之 一 , 它 代表 浏 
览 器 窗口 的 一 个 实例 ,提供 了 许多 方法 ,可 以 用 于 操作 浏览 器 窗口 ,如 打开 或 关闭 窗口 , 获 
取 和 调整 窗口 大 小 .获取 窗口 位 置 、 移 动 窗口 以 及 实现 间歇 定时 调用 .超时 调用 等 功能 。 
因此 ,本 项 目 可 以 使 用 JavaScript 的 window 对 象 完成 周期 性 调用 函数 的 功能 。 

本 项 目 中 利用 JavaScript 的 内 置 对 象 Date 的 相关 函数 完成 时 钟 计 时 功能 ,首先 获取 
系统 当前 时 间 ,然后 每 隔 一 秒 刷新 一 次 时 间 显 示 区 域 , 并 且 利 用 了 JavaScript 的 BOM 对 
象 中 的 window 对 象 的 setInterval() 完 成 周期 性 调用 琐 数 的 功能 。 

(1) 在 HTML 主体 部 分 ,在 一 script 二 一 /script 二 标签 中 调用 了 JavaScript 中 的 
setInterval() 方 法 ,作为 计时 器 。 其 效果 是 ,每 隔 1 秒 , 调 用 一 次 自 定义 的 函数 setTime()。 
这 里 使 用 的 setInterval() 方 法 是 JavaScript 的 BOM 对 象 中 的 window 对 象 的 方法 ,其 作 
用 是 按照 指定 的 周期 (以 毫秒 计 ) 调 用 方法 或 计算 表达 式 。 

(2) 在 setTime() 函 数 中 ,创建 内 置 对 象 Date 对 象 ,使 用 它 的 getHours() 获 取 当 前 
的 小 时 数 , 使 用 getMinutes() 获 取 当 前 的 分 钟 数 ,使 用 getSeconds() 获 取 当 前 的 秒 数 ,并 
使 用 innerHTML 属性 更 新 id 为 timer” 的 标签 的 标签 体内 容 (innerHTML 属性 是 所 有 
DOM 元 素 对 象 拥有 的 属性 ,其 作用 是 设置 或 返回 元 素 从 起 始 标签 到 结束 标签 之 间 的 
HTML,DOM 对 象 的 常用 属性 和 方法 会 在 第 9 章 中 详细 介绍 ) 。 


3. 项 目 实施 
本 项 目 代码 如 下 。 


<html> 
<head> 
<meta charset= "utf- 8"> 
<script> 
function setTime (){ 
Var d=new Date(); 
timer.innerHIML= "< i>"+d.getHours ()+":"+d.getMinutes ()+":"+d.getSeconds 


Or 
} 
</script> 
</head> 
<body> 


HTMLS+CSS3+JavaSeript 顺 旧 于 发 


<hl id="timer">00:00:00< /hl> 
< script> 
SetInterval ("setTime ()",1000); 

</script> 
< /body> 
</html> 
将 以 上 HTML 文件 保存 为 “数字 电子 时 钟 . html”, 使 用 浏览 器 打开 ,观察 页 面 上 输 

出 的 当前 时 间 信 息 。 


4. 知识 运用 
(1) 在 HTML 页 面 的 主体 部 分 输出 当前 日 期 和 星期 信息 ,输出 格式 如 下 。 
"今天 是 xxxXXx 年 驳 月 六 日 ,星期 x" 


使 用 JavaScript 的 内 置 对 象 Date 的 方法 获取 当前 日 期 和 星期 信息 。 

(2) 创建 一 个 长 度 为 2 的 数组 ,其 中 存放 两 个 随机 数字 ,要 求 两 个 随机 数字 均 为 [1， 
100] 区 间 内 的 整数 。 然 后 ,以 数组 中 存放 的 两 个 元 素 为 半径 ,分 别 计算 对 应 的 圆 的 面积 ， 
并 在 HTML 页 面 主体 部 分 显示 。 
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8.2.1 认识 BOM 对 象 


BOM 是 Browser Object Model 的 缩写 ,简称 浏览 器 对 象 模型 。 在 JavaScript 中 , 浏 
览 器 对 象 用 于 访问 当前 页 面 以 及 浏览 器 本 身 的 信息 。 

BOM 提供 了 独立 于 内 容 而 与 浏览 器 窗口 进行 交互 的 对 象 。 由 于 BOM 主要 用 于 管 
理 窗 口 与 窗口 之 间 的 通信 ,因此 其 核心 对 象 是 window。BOM 由 一 系列 相关 的 对 象 构 
成 ,并 且 每 个 对 象 都 提供 了 很 多 方法 与 属性 。 

常用 的 浏览 器 对 象 主要 有 以 下 6 种 。 

1. 窗口 对 象 

窗口 (window) 对 象 处 于 对 象 层 次 的 最 顶端 , 它 提供 了 处 理 浏览 器 窗口 的 方法 和 
属性 。 

2. 位 置 对 象 


位 置 (location) 对 象 提供 了 与 当前 打开 的 URL 一 起 工作 的 方法 和 属性 , 它 是 一 个 静 
态 的 对 象 。 


3. 历史 对 象 
历史 (Chistory) 对 象 提供 了 与 历史 清单 有 关 的 信息 。 
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4. 文 档 对 象 


文档 (document) 对 象 包含 了 与 文档 元 素 (elements) 一 起 工作 的 对 象 , 它 将 这 些 元 素 
封装 起 来 供 编程 人 员 使 用 。 可 以 使 用 document 作为 访问 HTML DOM 对 象 的 人口 。 


5. 导航 对 象 
导航 (navigator) 对 象 通常 用 于 检测 浏览 器 与 操作 系统 的 版 本 。 
6. 异 幕 对 象 


屏幕 Cscreen) 对 象 通常 用 于 获取 用 户 屏幕 信息 。 
BOM 层次 结构 模型 如 图 8. 2 所 示 。 


Browser Objects (BOM) 





Window 


I I 
| frames[] history | location | |navigator| | Screen 



























































DOM 





anchors[] applets[]| | areas[] | lembeds[] 




















document|* 





























forms[] | |images[]| | layers[] links[ ] 











8.2 BOM 层次 结构 模型 


浏览 器 对 象 的 引用 方式 主要 有 以 下 3 种 。 

(1) 对 应 于 文档 对 象 模型 中 的 层次 关系 ,JavaScript 对 浏览 器 对 象 的 引用 是 逐 层 
引用 。 

例如 : 引用 forms 对 象 时 ,使 用 window. document. forms 。 

(2) 通过 对 象 的 name 属性 引用 。 

例如 : 引用 一 个 name 属性 是 forml 的 表单 对 象 ,使 用 window. document. forml 。 

(3) 数组 型 浏览 器 对 象 的 引用 : 在 文档 对 象 模型 中 ,有 些 对 象 属于 数组 型 对 象 , 如 
document 对 象 下 一 层 的 images \links forms 等 对 象 ,引用 这 种 数组 对 象 时 ,可 以 使 用 对 
象 在 数组 中 的 位 置 (下 标 ) 引 用 。 例 如 ,window. document. forms[0] 表 示 引 用 文档 中 的 第 
一 个 表单 。 

另外 ,window 对 象 作 为 文档 对 象 模型 中 的 最 顶层 对 象 ,JavaScript 认为 它 是 默认 的 ， 
因此 可 以 省 略 不 写 。 如 window. document. forms 可 以 简写 成 document. forms 。 

下 面 分 别 介绍 几 种 常用 浏览 器 对 象 的 使 用 方法 。 
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8.2.2 window 对 象 


window 对 象 也 就 是 窗口 对 象 , 代 表 当 前 浏览 器 窗口 。window 对 象 是 每 个 窗口 或 者 
框 的 顶层 对 象 ,而 且 document location 及 history 是 它 的 子 对 象 。 
window 对 象 的 常用 属性 和 方法 见 表 8. 8。 


表 8.8 window 对 象 的 常用 属性 和 方法 









































属性 名 /方法 名 描 述 
name 窗口 的 名 字 
closed 判断 窗口 是 否 已 经 被 关闭 ,返回 布尔 值 
document,frames,history,location| 4 个 下 级 对 象 
length 窗口 内 的 框架 个 数 
self 当前 窗口 
top 当前 框架 的 最 顶层 窗口 
有 status 状态 栏 的 信息 
scrollbars 浏览 器 的 滚动 条 
toolbar 浏览 器 的 工具 栏 
menubar 浏览 器 的 菜单 栏 
locationbar 浏览 器 的 地 址 栏 
innerHeight 浏览 器 窗口 的 内 部 高 度 
innerWidth 浏览 器 窗口 的 内 部 宽度 





打开 一 个 新 窗口 ,返回 值 为 该 窗口 对 象 的 引用 。 其 中 ,参数 
URL 代表 要 打开 窗口 的 URL 地 址 ;参数 windowName 是 新 
打开 窗口 的 名 称 ;参数 windowFeature 是 新 窗口 的 实际 特性 
(窗口 的 外 观 ) ,包括 height( 窗 口 高 度 )、width( 窗 口 宽度 )、 
top( 窗 口 距离 屏幕 项 端的 像素 值 ) ,left( 窗 口 距 离 屏幕 左 端 
的 像素 值 ).menubar( 是 否 有 菜单 ) ,scrollbars( 是 否 有 滚动 
条 ) ,resizable( 窗 口 大 小 是 否 可 改变 ) ,toolbar( 是 否 显示 标准 
工具 栏 ) ,directories( 是 否 显 示 目 录 按 钮 ) ,location( 是 否 显 


open(URL, [windowName[ , 
windowFeature[ ,replace]]]) 


常用 示 地 址 栏 ) .status( 是 否 显示 状态 栏 ) fullscreen( 是 否 全 屏 显 
方法 示 ) ;参数 replace 是 一 个 可 选 的 布尔 型 参数 , 它 规定 了 装载 


到 窗口 的 URL 是 在 窗口 的 浏览 历史 中 创建 一 个 新 条 目 , 还 
是 蔡 换 浏览 历史 中 的 当前 条 目 。true 代表 替换 浏览 历史 中 
的 当前 条 目 ,false 代表 在 浏览 历史 中 创建 新 的 条 目 




















close() 关闭 窗口 

ey x 代表 水 平 位 移 ,y 代表 垂直 位 移 。 正 值 为 窗口 往 右 往 下 移 
动 , 负 值 相反 

moveTo(x,y) 窗口 左上 角 移 到 (x,y) 坐 标 处 
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续 表 


属性 名 /方法 名 


描 述 





resizeBy(x,y) 


调整 窗口 大 小 ,x 代表 水 平 位 移 ,y 代表 垂直 位 移 。 正 值 代 
表 往 右 往 下 调整 








resizeTo(w,h) 


调整 窗口 大 小 为 指定 值 ,w 代表 宽 ,h 代表 高 











focus() 得 到 焦点 
blur() 失去 焦点 
alert(text) 弹出 警告 对 话 框 ,在 窗口 中 显示 参数 text 指定 的 内 容 





confirm(text) 


弹出 确认 对 话 框 , 在 窗口 中 显示 参数 text 指定 的 内 容 





常用 
方法 


prompt(text, defaultText) 


弹出 带 有 文本 输入 框 的 提示 对 话 框 ,在 窗口 中 显示 参数 text 
指定 的 内 容 , 并 返回 用 户 输入 结果 





setInterval(expression, time) 


按照 指定 的 周期 time (以 毫秒 计 ) 调 用 函数 或 计算 表达 


式 expression 





clearInterval(id) 


取消 由 setInterval() 设 置 的 周期 性 执行 操作 ,参数 id 是 由 
setInterval() 返 回 的 id 值 





setTimeout(expression, time) 


在 延迟 指定 的 时 间 后 ,执行 表达 式 expression, 只 执行 一 次 ， 
延迟 时 间 time 以 毫秒 计 





clearTimeout() 





取消 由 setTimeout() 方 法 设置 的 延迟 执行 代码 块 ,参数 id 
是 由 setTimeout () 返 回 的 id 值 





window 对 象 表示 一 个 浏览 器 窗口 或 一 个 框架 。 在 客户 端 JavaScript 中 ,window 对 
象 是 全 局 对 象 , 所 有 的 表达 式 都 在 当前 的 环境 中 计算 。 也 就 是 说 ,要 引用 当前 窗口 ,根本 
不 需要 特殊 的 语法 ,可 以 把 那个 窗口 的 属性 作为 全 局 变量 使 用 。 例 如 ,可 以 只 写 
document ,而 不 必 写 window. document。 


同样 ,可 以 把 当前 窗口 对 象 的 方法 当 作 函 数 使 用 ,如 只 写 alert() ,而 不 必 写 window. 


alert() 。 


一 般 来 说 ,window 对 象 的 方法 都 是 对 浏览 器 窗口 或 框架 进行 某 种 操作 。 而 alert() 
方法 .confirm() 方 法 和 prompt() 方 法 则 不 同 , 它 们 通过 简单 的 对 话 框 与 用 户 进 行 交互 。 
例如 ,弹出 警告 对 话 框 ,如 图 8. 3 所 示 。 


alert ("message"); 


JavaScript Alert - 127.0.0.1:81 ES 














图 8.3 警告 对 话 框 


例如 ,弹出 确认 对 话 框 ,如 图 8.4 所 示 。 


confirm("message"); 
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本 方法 的 返回 值 是 boolean 类 型 , 单 击 OK 按钮 返回 true, 单 击 Cancel 按钮 返回 false。 
Javascript Confirm - 127.0.0.1:81 。 El 























图 8.4 确认 对 话 框 
例如 ,弹出 输入 对 话 框 ,如 图 8. 5 所 示 。 
var info=prompt ("你 最 喜欢 的 演员 是 谁 ?2",""); 
JavaScript prompt - 127.0.0.1:81 。 医 到 


你 最 喜欢 的 演员 是 谁 ? 














Ce Ce 


图 8.5 输入 对 话 框 











prompt("message","response") 在 带 有 文本 输入 框 的 窗口 中 显示 message, 并 用 
response 作为 用 户 在 文本 输入 框 中 输入 的 字符 串 的 默认 值 。 该 方法 的 返回 值 是 在 输入 框 
中 输入 的 数据 。 


8.2.3 history 对 象 


history 对 象 是 window 对 象 的 一 个 属性 ,用 来 存储 客户 端 最 近 访 问 过 的 网 页 清单 。 
history 对 象 的 常用 属性 和 方法 见 表 8. 9 所 示 。 


表 8.9 history 对 象 的 常用 属性 和 方法 





























属性 名 /方法 名 描述 
length 存储 在 记录 清单 中 的 网 页 数目 
current 当前 网 页 的 地 址 
常用 属性 
next 下 一 个 历史 记录 的 网 页 地 址 
previous 上 一 个 历史 记录 的 网 页 地 址 
backO 后 退 到 客户 端 查看 过 的 上 一 页 
forward() 前 进 到 客户 端 查看 过 的 下 一 页 
当 参 数 为 整数 时 ,表示 前 进 或 后 退 到 已 经 访问 过 的 某 个 页 
革 用 帮 关 面 。 参 数值 为 负数 代表 后 退 到 曾 访问 过 的 倒数 第 几 个 页 面 
go( 整 数 或 URL 字符 串 ) | 等 价 于 浏览 器 中 的 “后 退 "按钮 ;参数 值 为 正 数 代表 前 进 到 曾 
访问 过 的 第 几 个 页 面 , 等 价 于 浏览 器 中 的 “前 进 "按钮 。 当 参 
数 为 URL 地 址 字符 串 时 ,表示 前 往 该 URL 地 址 的 网 页 
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window. history 对 象 包含 浏览 器 的 历史 。 
history. back() 与 在 浏览 器 单 击 “ 后 退 " 按 钮 的 效果 相同 。 
history. forward() 与 在 浏览 器 中 单 击 “ 向 前 ”按钮 的 效果 相同 。 
例如 ,创建 一 个 页 面 上 的 后 退 按钮 ,代码 如 下 。 
<body> 
< input type= "button" value= "返回 "onClick= "history.back () "> 
</body> 
history. back() 方 法 可 加 载 历史 列表 中 的 前 一 个 URL( 如 果 存 在 )。 调 用 该 方法 的 效 
果 等 价 于 调用 history. go(-1) 。 


8.2.4 location 对 象 
location 对 象 提供 了 操作 当前 打开 的 窗口 的 URL 的 方法 和 属性 。location 对 象 的 常 
用 属性 和 方法 见 表 8. 10。 
表 8. 10 location 对 象 的 常用 属性 和 方法 


属性 名 /方法 名 描 述 


其 值 为 当前 页 面 的 完整 的 URL 地 址 字符 串 , 也 可 以 为 其 重新 赋值 ,新 
值 为 导航 到 的 新 网 页 ,其 作用 等 价 于 二 a> 标 签 的 功能 





href 




















protocol 当前 URL 中 的 通信 协议 

常用 属性 | host 当前 URL 中 的 主机 名 
hostname 当前 URL 中 的 host:port 部 分 
port 当前 URL 中 的 端口 号 
hash 在 当前 URL 中 定位 锚 点 名 称 
reload() 刷新 ,重新 加 载 当前 的 网 页 





常用 方法 | replace(URL) “| 用 参数 中 的 URL 网 址 取代 当前 的 网 页 
assign(URL) 加 载 参数 URL 指定 的 新 的 文档 











window. location 对 象 用 于 获得 当前 页 面 的 地 址 (URL) ,并 把 浏览 器 重 定向 到 新 的 
页 面 。 
location. href 属性 返回 当前 页 面 的 URL, 也 可 以 为 其 重新 赋值 ,新 值 为 导航 到 的 新 
网 页 。 

例如 ,创建 一 个 加 载 百度 页 面 的 按钮 。 


<input type= "button" value= "返回 " onClick= "location.href= 'http://www.baidu.com'"> 


8.2.5 screen 对 象 


screen 对 象 包含 有 关 用 户 屏 幕 的 信息 。screen 对 象 的 常用 属性 和 方法 见 表 8. 11 
所 示 。 
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表 8.11 screen 对 象 的 常用 属性 




















属性 名 /方法 名 描 述 属性 名 /方法 名 描 述 
avail Width 可 用 的 屏幕 宽度 width 返回 显示 屏幕 的 宽度 
availHeight 可 用 的 屏幕 高 度 height 返回 显示 屏幕 的 高 度 
window. screen. height 方法 用 于 获取 用 户 计算 机 屏幕 的 高 度 , 不 包括 浏览 器 或 者 项 


部 工具 栏 与 底部 工具 栏 的 高 度 。 
例如 ,在 分 辩 率 为 1366X768 的 计算 机 显示 屏 上 输出 。 


document .write (window. screen.height); 


其 结果 为 768。 

window. screen. availHeight 属性 ,顾名思义 ,就 是 计算 机 屏幕 的 可 用 高 度 , 即 计算 机 
屏幕 减 掉 顶 部 工具 栏 与 底部 工具 栏 的 高 度 。 

如 果 输 出 


document .write (window. screen.availHeight); 


其 结果 为 738。 
738 二 768( 计 算 机 屏幕 ) 一 30( 底 部 任务 栏 ) 
因为 显示 器 有 底部 任务 栏 ,所 以 当 把 任务 栏 隐藏 后 ,结果 为 768。 


8.2.6 ”document 对 象 

document 对 象 的 常用 属性 和 方法 在 第 9 章 中 会 单独 介绍 。 
8.2.7 项 目 : 打开 新 窗口 

1. 项 目 说 明 


在 HTML 页 面 中 放置 两 个 按钮 ,分 别 为 “创建 窗口 ?和 * 关 闭 窗 口 ”。 利 用 JavaScript 
中 的 window 对 象 的 方法 , 单 击 “ 创 建 窗口 ”按钮 ,打开 一 个 新 的 浏览 器 窗口 ,里 面 显示 
8.1.7 节 完成 的 数字 电子 时 钟 页 面 。 单 击 * 关 闭 窗口 ”按钮 ,关闭 当前 的 浏览 器 窗口 。 


2. 项 目 设计 


本 项 目 要 实现 的 是 操作 浏览 器 窗口 的 功能 , 即 打开 新 窗口 和 关闭 当前 窗口 。 可 以 使 
用 JavaScript BOM 中 的 window 对 象 完成 。window 对 象 即 浏览 器 窗口 的 一 个 实例 , 提 
供 了 许多 方法 ,可 以 用 于 操作 浏览 器 窗口 ,如 打开 或 关闭 窗口 .获取 和 调整 窗口 大 小 、 获 取 
窗口 位 置 ,移动 窗口 等 。 因 此 ,本 项 目 可 以 使 用 JavaScript 的 window 对 象 完 成 打开 新 窗 
口 和 关闭 当前 窗口 的 功能 。 

(1) 首先 ,在 HTML 页 面 主体 部 分 放置 两 个 按钮 ,第 一 个 按钮 的 onClick 事件 的 事 
件 处 理 函 数 为 createwindow(), 第 二 个 按钮 的 onClick 事件 的 事件 处 理 函 数 为 


closewindow() 。 








第 si 个 uavaseripf 对 象 


(2) 在 createwindow() 函 数 中 ,使 用 浏览 器 对 象 中 的 顶层 对 象 window 的 open() 方 


法 打开 一 个 新 的 浏览 器 窗口 ,其 中 显示 “数字 电子 时 钟 . html” 页 面 ,新 窗口 的 名 称 设 为 
mywindow ,窗口 设置 成 “无 菜单 栏 ,高 200, 宽 300, 不 可 改变 大 小 ”的 状态 。 





(3) 在 closewindow() 函 数 中 使 用 window 对 象 的 close() 方 法 关闭 当前 窗口 。 
3. 项 目 实 施 
本 项 目 代 码 如 下 。 


<html> 
<head> 
<meta charset="utf- 8"> 
<script language= "javascript"> 
function createwindow () { 
var Ww=Window.open ("数字 电子 时 钟 .html","mywindow"，"menubar= no,height= 200, 
width= 300, resizable=no", "true"); 
} 


function closewindow () { 


WwW.close(); 
, 
</script> 
< /head> 
<body> 
< form> 


< input type= "button" value= "创建 窗口 " onClick= "creatwindow()"> 
<input type= "button" value= "关闭 窗 口 " onClick= "closewindow () "> 
< /form> 
< /body> 
</htm> 


将 以 上 HTML 文件 保存 为 “打开 新 窗口 . html”, 使 用 浏览 器 打开 ,分 别 单 击 “ 创 建 窗 


口 " 和 “关闭 窗口 ”按钮 ,观察 弹出 的 新 窗口 中 的 信息 和 关闭 当前 窗口 的 效果 。 


4. 知识 运用 
(1) 在 HTML 页 面 的 主体 部 分 放置 一 个 “删除 ”按钮 和 一 个 “输入 用 户 名 ”按钮 , 单 击 


“删除 ”按钮 时 ,会 弹出 提示 “确认 要 删除 吗 ?”; 单 击 “ 输 入 用 户 名 ”按钮 时 ,会 弹出 输入 用 户 
名 对 话 框 (window. prompt()), 输 入 用 户 名 后 单 击 “ 确 定 ” 按 钮 ,弹出 的 对 话 框 中 显示 的 提 
示 的 信息 格式 如 下 :“ 您 的 名 字 是 : XXX”, 如 图 8. 6 所 示 。 





(2) 在 HTML 页面 的 主体 部 分 ,显示 当前 页 面 的 完整 的 URL 地 址 字符 串 、 当 前 


URL 中 的 通信 协议 以 及 当前 时 间 。 另 外 ,在 下 方 放置 一 个 * 超 链接 ”按钮 和 * 刷 新 ”按钮 ， 
单 击 “ 超 链 接 ” 按 钮 , 跳 转 到 8. 1.7 节 的 “数字 电子 时 钟 . html” 页 面 , 单 击 “ 刷 新 ”按钮 ,刷新 
当前 页 面 ,效果 如 图 8.7 所 示 。 
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图 8.6 显示 用 户 名 对 话 框 


|e owe EEC 本 区 
文件 (D ” 编 铝 (E) ”查看 (V) ”收藏 夫 (A) 工具 (T) ”帮助 (H) 


location href=file:///D:/codes/ch05/ex05_05 html 
location protocol=file- 





当前 时 间 ， 2016 年 12 月 6 日 15:40:21 
起 接 | 忆 新 | 








图 8.7 显示 超 链接 和 刷新 按钮 


习 题 
选择 题 
1. 在 I 中 要 想 获 得 当前 窗口 的 位 置 ,可 以 使 用 window 对 象 的 ( “) 方 法 。 
A. windowX B. screenX C. screenLeft D. windowLeft 


2. 分 析 下 面 的 JavaScript 代码 段 : 


a=new Array (2,3, 4,5,6); 


Sum=07 
输出 结果 是 (  )。 


for(i=1;i<a.length;i++) 
sumt+=al[i]; 
document .write (sum); 


| B. 18 C. 14 D. 12 
3. window 对 象 的 方法 中 ,( ) 与 计时 器 有 关 。 

A. confirm() B. close() C. alert() D. setInterval() 
4. 在 HTML 中 ,Location 对 象 的 ( 。 “”) 属 性 用 于 设置 或 检索 URL 的 端口 号 。 

A. hostname B. host C. pathname D. href 


5. 选项 ( ) 中 的 对 象 与 浏览 列表 有 关 。 


兹 (Bi 饲 QUavaseripfy 对 鲜 


A. location ,history B. window ,location 
C. navigator, window D. historylist,location 
6. 下 列 JavaScript 语句 中 ,( ) 能 实现 单 击 一 个 按钮 时 弹出 一 个 消息 框 。 
. 二 BUTTON VALUE ==" 和 鼠标 响应 "onClick 二 alert(" 确 定 ") 宇 过 /BUTTON> 
二 INPUT TYPE="BUTTON" VALUE 一" 鼠标 响应 "onClick 一 alert(" 确 定 ") 之 
. <INPUT TYPE= "BUTTON" VALUE 二 "鼠标 响应 ”onChange 一 alert(" 确 定 ") 二 
.二 BUTTON VALUE 二 "鼠标 响应 "onChange 二 alert(" 确 定 ") 这 二 /BUTTON 
HTML 页 面 中 ,下 面 关于 window 对 象 的 说 法 ,不 正确 的 是 (  )。 
. window 对 象 表示 浏览 器 的 窗口 ,可 用 于 检索 有 关 窗 口 状 态 的 信息 
.window 对 象 是 浏览 器 所 有 内 容 的 主 容器 
. 浏览 器 打开 HTML 文档 时 ,通常 会 创建 一 个 window 对 象 
.如 果 文 档 定 义 了 多 个 框架 ,浏览 器 只 为 原始 文档 创建 一 个 window 对 象 , 无 须 
为 每 个 框架 创建 window 对 象 
8. 在 JavaScript 中 ,可 以 使 用 Date 对 象 的 ( ) 方 法 返回 该 对 象 的 日 期 。 
A. getDate B. getYear C. getMonth D. gerTime 
9. ( ) 对 象 可 以 获得 屏幕 的 大 小 。 
A. window B. screen C. navigator D. screenX 
10. 代码 “setInterval("alert('welcome'") ;" ,1000);” 的 意思 是 ( ) 。 
A. 等 待 1000s 后 ,再 弹出 一 个 对 话 框 
B. 等 待 1s 后 弹出 一 个 对 话 杠 
C. 语句 报错 ,语法 有 问题 
D. 每 隔 1s 弹出 一 个 对 话 框 
11. 要 求 用 JavaScript 实现 下 面 的 功能 : 在 一 个 文本 框 中 内 容 发 生 改变 后 , 单 击 页 面 
中 的 其 他 部 分 将 弹出 一 个 消息 框 显示 文本 框 中 的 内 容 。 下 面 请 句 正确 的 是 ( 入 


A. =input type= "text" onChange= "alert(this. value)"> 


口 P 虽 了 日 Pp> 


B. 所 input type= "text" onClick= "alert(this. value)"> 
C. <input type= "text" onChange= "alert(text. value) "> 
D. =input type= "text" onClick= "alert(value)"> 
12. window 对 象 的 open 方法 返回 的 是 ( bs 
A. 没有 返回 值 
B. boolean 类 型 ,表示 当前 窗口 是 否 打 开 成 功 
C. 返回 打开 新 窗口 的 对 象 
D. 返回 int 类 型 的 值 ,开启 窗口 的 个 数 
13. 分 析 下 面 的 JavaScript 代码 有 段 : 
a=new Array ("100", "2111", "41111") ; 
for (var i=0;i<a.length;i){ 


document .write (a[i] ""); 
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} 


输出 结果 是 ( $s 
A 100' 211 41111 | 
G0 1 2 WY 
14. 分 析 下 面 的 JavaScript 代码 段 : 
Var a=15.49; 


document .write (Math.round (a)); 


输出 结果 是 (。”)。 
并, 卫 B. 16 ©. :5 D. 15.4 
15. 要 在 页 面 的 状态 栏 中 显示 “已 经 选中 该 文本 框 ” 下列 JavaScript 语句 正确 的 
是 ( 


_ 


. window. status 一 "已 经 选中 该 文本 框 " 
.document. status 一 "已 经 选中 该 文本 框 " 
.window. screen 一 "已 经 选中 该 文本 框 " 
.document. screen 一 "已 经 选中 该 文本 框 " 
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DOM 文档 对 象 模型 


本 章 概述 

通过 本 章 的 学 习 , 学 生 能 够 了 解 DOM 对 象 和 它们 的 常用 方法 ,使 用 DOM 对 象 改变 
页 面 样式 、 内 容 , 添 加 、 删 除 页 面 元 素 ,修改 元 素 的 属性 ,获取 事件 对 象 并 且 自 定义 事件 处 
理 函 数 。 


学 习 重点 与 难点 

重点 : 

(1) Document 对 象 `. Event 对 象 \.Element 对 象 、Attribute 对 象 常 用 属性 和 方法 的 
使 用 。 

(2) 通过 Document 对 象 获取 、 修 改 页 面 元 素 。 

(3) 通过 Event 对 象 获取 事件 发 生 的 元 素 、 键 盘 按 键 的 状态 .鼠标 的 位 置 . 鼠 标 按 钮 
的 状态 等 。 

(4) 通过 Element 对 象 遍历 节点 。 

(5) 通过 Attribute 对 象 获取 或 访问 节点 。 

难点 : 


(1) 事件 绑 定 的 方式 。 

(2) 事件 的 冒 泡 和 捕获 。 

重点 及 难点 学 习 指导 建议 : 

。 通过 大 量 的 编程 练习 记忆 JavaScript 中 的 常用 DOM 对 象 的 方法 的 使 用 方式 。 
。 独立 完成 每 个 章节 中 的 知识 运用 部 分 ,体会 使 用 到 的 知识 点 的 具体 作用 。 
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91 认识 DOM 对 象 


文档 对 象 模 型 (Document Object Model,DOM) 是 W3C 组 织 推荐 的 处 理 可 扩展 标志 
语言 的 标准 编程 接口 。HTML DOM 是 W3C 标准 ,定义 了 用 于 HTML 的 一 系列 标准 的 
对 象 ,以 及 访问 和 处 理 HTML 文档 的 标准 方法 。HTML DOM 把 HTML 文档 呈现 为 带 
有 元 素 、 属 性 和 文本 的 树 结构 (节点 树 )。 

通过 DOM, 可 以 访问 所 有 的 HTML 元 素 ,连同 它们 包含 的 文本 和 属性 。 可 以 对 其 
中 的 内 容 进 行 修改 和 删除 ,同时 也 可 以 创建 新 的 元 素 。HTML DOM 独立 于 平台 和 编程 
语言 。 它 可 被 任何 编程 语言 (如 Java、JavaScript 和 VBScript) 使 用 。 

通过 可 编程 的 对 象 模型 ,JavaScript 获得 了 足够 的 能 力 创建 动态 的 HTML, 主要 
包括 : 

。 JavaScript 能 够 改变 页 面 中 的 所 有 HTML 元 素 。 

。 JavaScript 能 够 改变 页 面 中 的 所 有 HTML 属性 。 

。 JavaScript 能 够 改变 页 面 中 的 所 有 CSS 样式 。 

。 JavaScript 能 够 对 页 面 中 的 所 有 事件 做 出 反应 。 

下 面 分 别 介绍 HTML DOM 中 的 HTML DOM Document、HTML DOM Event、 
HTML DOM Element 和 HTML DOM Attribute 对 象 。 





92 HTML DOM Document 对 象 


HTML DOM Document 对 象 表示 每 个 载 人 浏览 器 的 HTML 文档 。Document 对 象 
使 我 们 可 以 从 脚本 中 对 HTML 页 面 中 的 所 有 元 素 进 行 访问 。Document 对 象 是 window 
对 象 的 一 部 分 ,可 通过 window. document 属性 对 其 进行 访问 。 

Document 对 象 是 JavaScript 实现 网 页 各 种 功能 中 最 常用 的 基本 对 象 之 一 , 它 代表 浏 
览 器 窗口 中 的 文档 ,可 以 用 来 处 理 文档 中 包含 的 html 元 素 ,如 表单 .图 像 . 超 链接 等 。 

Document 对 象 的 常用 属性 和 方法 见 表 9. 1 所 示 。 


表 9.1 Document 对 象 的 常用 属性 和 方法 




















属性 名 /方法 名 描 述 
1i 文档 中 的 一 个 <a href 王 二 超 链接 标签 ,该 属性 本 身 是 一 
ink 个 对 象 
linkColor 文档 的 链接 颜色 
常用 | alinkColor 活动 链接 颜色 
属性 | vlinkColor 已 单 击 的 超 链接 颜色 
layer, link ,image, form, area, applet, 
sb oe Coo Document 对 象 的 几 个 子 对 象 
cookie 存储 cookie. txt 文件 的 一 段 信息 
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续 表 
属性 名 /方法 名 描 述 
bgColor 文档 中 的 背景 颜色 
fgColor 文档 中 的 文本 颜色 
URL 表示 该 文件 的 网 址 
title 文档 的 标题 
lastModified 文档 最 后 的 修改 日 期 
writeCtext) 向 当前 页 面 输出 信息 text 
getSelection() 获取 当前 选取 的 字符 串 ,返回 值 是 当前 选取 的 字符 串 
通过 HTML 标签 的 name 属性 获得 一 些 元 素 对 象 , 返 回 
用 | 区 全 人 的 四 的 是 具有 相同 name 属性 的 HTML 元 素 对 象 集合 
通过 HTML 标签 的 id 属性 获得 一 个 HTML 元 素 对 象 ， 
机 返回 具有 该 id 属性 的 HTML 元 素 对 象 
getElementsByTagName( tagname) 人 获得 指定 标签 名 tagname 的 HTML 
1. 获取 页 面 元 素 


通常 通过 JavaScript 操作 HTML 元 素 , 需 要 使 用 getElementByld() .getElementsByName() 
或 getElementsByTagName()3 个 方法 之 一 获取 指定 的 HTML 元 素 对 象 或 对 象 集合 。 

1) getElementById() 

通过 HTML 标签 的 id 属性 获得 一 个 HTML 元 素 对 象 ,返回 具有 该 id 属性 的 
HTML 元 素 对 象 。 

例如 ,车 要 获取 表单 中 id 属性 值 为 username 的 文本 框 的 输入 内 容 , 可 以 使 用 如 下 
请 句 : 


Var Username= document .getElementById ("username") .value7 


2) getElementsByName() 

通过 HTML 标签 的 name 属性 获得 一 些 元 素 对 象 , 返 回 的 是 具有 相同 name 属性 的 
HTML 元 素 对 象 集合 。 

例如 , 若 要 获取 表单 中 第 一 个 name 属性 值 为 username 的 文本 框 的 输入 内 容 , 可 以 
使 用 如 下 语句 : 


Var un= document .getElementsByName ("username"); 


Var username= un[0] .value; 

3) getElementsByTagName() 

通过 HTML 标签 名 获得 指定 标签 名 的 HTML 元 素 对 象 集合 。 

例如 , 若 要 获取 表单 中 第 一 个 标签 名 为 input 的 输入 控件 的 输入 内 容 , 可 以 使 用 如 下 
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Var un= document .getElementsByTagName ("input"); 


Var username= un[0] .value; 


2. 修改 页 面 元 素 
获取 页 面 元 素 后 ,可 以 改变 页 面 元 素 的 样式 、 内 容 和 属性 等 。 改 变 的 方法 如 下 。 
1) 改变 HTML 元 素 的 内 容 


document .getElementById (id) .innerHTMIL= new HIML 
document .getElementById (id) .text=new Text 


例如 : 

document .getElementById("title") .innerHTML= "<hl> 这 是 标题 </hl>" 
2) 改变 HTML 元 素 的 属性 

document .getElementById (id) .attribute=new value 

例如 : 

document .getElementById ("image") .src= "img/flower.jpg" 
3) 改变 HTML 元 素 的 样式 

document .getElementById (id) .style.Property= new style 
例如 : 

document .getElementById ("book") .style.display= "none" 
3. 添加 /删除 页 面 元 素 

1) 创建 新 的 HTML 元 素 

下 面 这 段 代码 用 于 创建 新 的 一 p> 元 素 。 

Var para= document .createElement ("p"); 


如 需 向 二 p 二 元 素 添 加 文本 ,必须 首先 创建 文本 节点 。 
下 面 这 段 代 码 创建 了 一 个 文本 节点 。 


var node= document .createTextNode ("这 是 新 段落 。"); 
然后 向 二 p 二 元 素 追 加 这 个 文本 节点 : 
para.appendChild (node); 


最 后 向 一 个 已 有 的 元 素 追 加 这 个 新 元 素 。 
这 段 代码 找到 一 个 已 有 的 元 素 : 


Var element= document .getElementById("div1"); 
这 段 代 码 向 这 个 已 有 的 元 素 追 加 新 元 素 : 


element .appendChild (para); 
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2) 删除 已 有 的 HTML 元 素 
如 需 删 除 HTML 元 素 ,必须 首 先 获得 该 元 素 的 父 元 素 。 
假设 HTML 文档 含有 一 个 div 元 素 ,该 div 有 两 个 子 节点 (两 个 二 p 二 元 素 )。 


<div id="divl"> 

<p id= "pl1"> 这 是 一 个 段落 。< /p> 

<p id- "p2"> 这 是 另 一 个 段落 。< /p> 
</div> 
找到 id 二 "div1” 的 元 素 : 
Var parent= document .getElementById ("div1"); 
找到 id 二 "p1" 的 二 p 志 元素 : 
Var child= document .getElementById ("pl1"); 


从 父 元 素 中 删除 子 元 素 : 


parent .removeChild (child); 
4. form 对 象 


表 9.2 列 出 的 document 的 对 象 集合 中 ,forms 代表 form 对 象 集合 。 
表 9.2 document 的 对 象 集合 























集 合 描 述 

all[] 提供 对 文档 中 所 有 HTML 元 素 的 访问 
anchors[ ] 返回 对 文档 中 所 有 Anchor 对 象 的 引用 
applets 返回 对 文档 中 所 有 Applet 对 象 的 引用 
forms[] 返回 对 文档 中 所 有 Form 对 象 的 引用 
images[] 返回 对 文档 中 所 有 Image 对 象 的 引用 
links[] 返回 对 文档 中 所 有 Area 和 Link 对 象 的 引用 





form 对 象 的 常用 属性 和 方法 见 表 9. 3 。 
表 9.3 form 对 象 的 常用 属性 和 方法 




















属性 名 /方法 名 描述 
name 表单 名 ,相当 于 二 form 二 标签 中 的 name 属性 
ee 表单 提交 时 执行 的 动作 ,相当 于 <<form> 标 签 的 
action 属性 
常用 | method 表单 的 提交 方式 ,相当 于 一 form> 标 签 的 method 属性 
属性 | elements 表单 中 的 所 有 控件 ,以 数组 索引 值 表示 
length 表单 中 的 控件 个 数 
牛人 
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续 表 
属性 名 /方法 名 描 述 
着 表 submit() 提交 表单 ,相当 于 单 击 表单 中 的 “提交 ”按钮 的 作用 
方法 将 所 有 表单 中 的 控件 值 重 置 为 默认 值 ,相当 于 单 击 表 
reset() 4 
单 中 的 “ 重 置 "按钮 的 作用 








当 JavaScript 读 到 HTML 标签 中 对 应 的 form 表单 输入 控件 标签 时 ,会 自动 建立 一 
个 该 类 型 的 form 子 对 象 ,并 将 该 对 象 存放 到 form 对 象 的 elements 数组 中 。 

对 表单 的 子 对 象 的 访问 可 以 有 以 下 3 种 格式 。 

(1) 利用 表单 对 象 的 elements 属性 访问 : 


document .forms [n] .elements [n] . 子 对 象 属性 名 
document .forms [n] .elements [n] . 子 对 象 方法 名 


(2) 利用 表单 名 和 子 对 象 名 访问 : 


document .forms [n] .elements [n] . 子 对 象 属性 名 
document .forms [n] .elements [n] . 子 对 象 方法 名 


(3) 混合 访问 方式 : 


document .forms [n] . 子 对 象 名 . 子 对 象 属性 名 
document .forms [n] . 子 对 象 名 . 子 对 象 方法 名 


form 的 常用 子 对 象 的 属性 和 方法 见 表 9. 4。 
表 9.4 form 的 常用 子 对 象 的 属性 和 方法 





















































子 对 象 属性 名 /方法 名 描 述 
defaultValue 默认 值 (相当 于 标签 中 value 属性 的 值 ) 
name 文本 对 象 的 名 字 ( 相 当 于 标签 中 name 属性 的 值 ) 
et value 文本 对 象 的 当前 值 (相当 于 标签 中 value 属性 的 值 ) 
password form 文本 对 象 所 在 的 表单 
人 blur() 文本 对 象 失去 焦点 
focus() 文本 对 象 得 到 焦点 
select() 文本 对 象 设置 成 选取 状态 
checked 设置 对 象 的 选中 状态 ,返回 布尔 值 (true 代表 选中 
defaultchecked 默认 选中 状态 
name 对 象 的 名 字 ( 相 当 于 标签 中 name 属性 的 值 ) 
radio value 该 对 象 的 值 (相当 于 标签 中 value 属性 的 值 ) 
checkbox form 对 象 所 在 的 表单 
blur() 对 象 失去 焦点 
focus() 对 象 得 到 焦点 
click() 在 该 对 象 上 单 击 
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续 表 

子 对 象 属性 名 /方法 名 描 述 

name 按钮 对 象 的 名 字 ( 相 当 于 标签 中 name 属性 的 值 ) 

value 按钮 对 象 上 的 文字 (相当 于 标签 中 value 属性 的 值 ) 
button form 按钮 对 象 所 在 的 表单 
submit 
blur() 按钮 对 象 失去 焦点 

focus() 按钮 对 象 得 到 焦点 

click() 在 该 按钮 对 象 上 单 击 

name 该 列表 对 象 的 名 字 ( 相 当 于 标签 中 name 属性 的 值 ) 

length 该 列表 对 象 option 的 数目 

form 该 列表 对 象 所 在 表单 

3 存放 二 select 二 标签 中 的 所 有 二 option 二 标签 的 对 象 数组 ， 

a Ope 过 option> 本身 也 对 应 option 子 对 象 

selectedIndex 选中 项 目的 索引 值 ( 从 0 开始 

blur() 列表 对 象 失去 焦点 

focus() 列表 对 象 得 到 焦点 

defaultSelected | 指定 该 选项 为 默认 选择 状态 

index 所 有 选项 构成 的 数组 索引 值 
option length select. options 数组 的 元 素 个 数 , 与 select 对 象 的 length 相同 

(select 的 子 对 象 )| selected 菜单 项 是 否 被 选中 ,返回 布尔 值 





text 


该 菜单 项 显示 的 文字 








value 
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该 菜单 项 的 值 ( 相 当 于 标签 中 value 属性 的 值 ) 


HTML DOM Event 对 象 


HTML DOM Event 对 象 表示 事件 的 状态 ,如 事件 在 其 中 发 生 的 元 素 、 键 盘 按 键 的 状 
态 、 鼠 标的 位 置 、 鼠 标 按钮 的 状态 等 。 
event 对 象 的 常用 属性 见 表 9. 5。 


表 9.5 event 对 象 的 常用 属性 














属 性 名 描 述 

altKey 返回 当 事 件 被 触发 时 ,Alt 是 否 被 按 下 
button 返回 当 事 件 被 触发 时 ,哪个 鼠标 按钮 被 单 击 
clientX 返回 当 事 件 被 触发 时 ,鼠标 指针 的 水 平 坐标 
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续 表 
属 性 名 描 ” 述 
clientY 返回 当 事 件 被 触发 时 ,鼠标 指针 的 垂直 坐标 
ctrlKey 返回 当 事 件 被 触发 时 ,Ctrl 键 是 否 被 按 下 
metaKey 返回 当 事 件 被 触发 时 ,meta 键 是 否 被 按 下 
relatedTarget 返回 与 事件 的 目标 节点 相关 的 节点 
ScreenX 返回 当 某 个 事件 被 触发 时 ,鼠标 指针 的 水 平 坐标 
ScreenY 返回 当 某 个 事件 被 触发 时 ,鼠标 指针 的 垂直 坐标 
shiftKey 返回 当 事 件 被 触发 时 ,Shift 键 是 否 被 按 下 


除了 上 面 的 鼠标 /事件 属性 ,对 于 IE 浏览 器 ,还 支持 以 下 的 event 对 象 属性 ( 表 9. 6)。 


属 性 名 


表 9.6 event 对 象 属性 (IE 浏览 器 ) 
描述 





cancelBubble 


如 果 事 件 句柄 想 阻止 事件 传播 到 包容 对 象 ,必须 把 该 属性 设 为 true 





keyCode 


对 于 keypress 事件 ,该 属性 声明 了 被 硕 击 的 键 生成 的 Unicode 字符 码 。 对 于 
keydown 和 keyup 事件 , 它 指定 了 被 散 击 的 键 的 虚拟 键盘 码 。 虚 拟 键盘 码 可 
能 和 使 用 的 键盘 的 布局 相关 





offsetX,offsetY 


发 生 事件 的 地 点 在 事件 源 元 素 的 坐标 系统 中 的 X 坐标 和 Y 坐标 





returnValue 


如 果 设 置 了 该 属性 , 它 的 值 比 事件 句柄 的 返回 值 优先 级 高 。 把 这 个 属性 设置 
为 fasle, 可 以 取消 发 生 事件 的 源 元 素 的 默认 动作 





srcElement 


对 于 生成 事件 的 window 对 象 .document 对 象 或 element 对 象 的 引用 





toElement 


对 于 mouseover 和 mouseout 事件 ,该 属性 引用 移 人 鼠标 的 元 素 





X,Y 





事件 发 生 的 位 置 的 X 坐标 和 YY 坐标 ,它们 相对 于 用 CSS 动态 定位 的 最 内 层 包 
容 元 素 


其 中 ,button 检查 按 下 的 鼠标 键 。 
event. button 可 能 返回 的 值 如 下 。 


按 左 键 
按 中 间 键 
按 右 键 
按 左右 键 





按 左 键 和 中 间 键 
按 右键 和 中 间 键 


~ mwmnr 避 


按 所 有 的 键 
这 个 属性 仅 用 于 onMouseDown .onMouseUp 和 onMouseMove 时 





不 管 鼠 标 状态 如 何 ,都 返回 0( 如 onClick) 。 


有 件 。 对 其 他 事件 ， 
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clientX clientY 返回 鼠标 在 窗口 客户 区 域 中 的 X 坐标 和 Y 坐标 。 

语法 : event. clientX event. clientY 。 

这 是 一 个 只 读 属 性 。 这 意味 着 ,只 能 通过 它 得 到 鼠标 的 当前 位 置 ,不 能 用 它 更 改 鼠 标 
的 位 置 。 


94 HTML DOM Element 对 象 


HTML DOM Element 对 象 表示 任意 的 HTML 元 素 。 元 素 对 象 可 以 拥有 类 型 为 元 
素 节 点 、 文 本 节点 、 注 释 节 点 的 子 节点 。NodeList 对 象 表示 节点 列表 ,如 HTML 元 素 的 
子 节点 集合 。 元 素 也 可 以 拥有 属性 ,属性 是 属性 节点 。 

element 对 象 的 属性 和 方法 可 用 于 所 有 HTML 元 素 。element 对 象 的 常用 属性 和 方 
法 见 表 9.7。 


表 9.7 element 对 象 的 常用 属性 和 方法 






























































属性 名 /方法 名 描 述 
attributes 返回 元 素 属性 的 NamedNodeMap 
childNodes 返回 元 素 子 节点 的 NodeList 
firstChild 返回 元 素 的 首 个 子 元 素 
lastChild 返回 元 素 的 最 后 一 个 子 元 素 
nodeName 返回 元 素 的 名 称 
nodeType 返回 元 素 的 节点 类 型 
nodeValue 设置 或 返回 元 素 值 
常用 属性 
ownerDocument 返回 元 素 的 根 元 素 ( 文 档 对 象 ) 
parentNode 返回 元 素 的 父 元 素 
previousSibling 返回 位 于 相同 节点 树 层级 的 前 一 个 元 素 
nextSibling 返回 位 于 相同 节点 树 层级 的 下 一 个 元 素 
innerHTML 设置 或 返回 元 素 的 内 容 
style 设置 或 返回 元 素 的 style 属性 
textContent 设置 或 返回 节点 及 其 后 代 的 文本 内 容 
ee 在 指定 的 已 有 的 子 节点 existingItem 之 前 插入 新 节 
insertBefore(newltem, existingItem) i 
常用 方法 | getAttribute(attrname) 返回 元 素 节点 的 指定 属性 名 attrname 的 属性 值 
getElementsByTagName(tagname) | 返回 拥有 指定 标签 名 tagname 的 所 有 子 元 素 的 集合 
setAttribute(attrname,attrvalue) 把 名 为 attrname 的 属性 设置 或 更 改 为 指定 值 attrvalue 


利用 element 对 象 的 属性 ,可 以 帮助 我 们 遍历 文档 元 素 和 节点 。 
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例如 ,使 用 parentNode 属性 ,获取 父 元 素 。 


< form id= "form"> 
<div id- "divA"> 
<div id= "divB"> 
< input type= "button" value= "删除 " onClick= "deleteMe (this. 
parentNode .parentNode);"> 
</div> 
</div> 
< /form> 


所 谓 parentNode, 是 其 上 一 层 节 点 ,里 面 的 this. parentNode 是 divB, 而 this. 
parentNode. parentNode 是 divA。 
例如 ,使 用 firstChild 和 lastChild 获取 子 元 素 。 


<div id="divl"> 
<div id="div2">< /div> 

</div> 

<script> 
Var oDiv= document .getElementById ("div1"); 
Var oDiv2= document .getElementById ("div2"); 
alert (oDiv.firstChild.nodeName); 
alert (oDiv.lastChild.nodeName); 

</script> 


输出 的 第 一 个 和 最 后 一 个 节点 ,结果 是 # text, 也 就 是 文本 节点 ,而 不 是 设想 中 的 
DIV 节点 。 这 是 由 于 节点 前 后 有 空格 造成 的 。 
编码 时 格式 的 需要 ,HTML 代码 会 有 很 多 空格 或 空 行 。 在 HTML 文件 中 ,空格 
也 算 子 节点 ,节点 名 称 是 # text' 节 点 类 型 是 文本 。 
当 去 掉 div 元 素 的 空格 和 换行 后 ,代码 如 下 。 
<div id= "divl"><div id="div2">< /div>< /div> 
<script> 
Var oDiv= document .getElementById ("div1"); 
Var oDiv2= document .getElementById ("div2"); 
alert (oDiv.firstCchild.nodeName); //DIV 
alert (oDiv.lastChild.nodeName);  //DIV 
</script> 
以 上 代码 输出 的 结果 是 两 次 DIV 节点 。 
所 以 ,尽量 避免 使 用 firstChild lastChild childNodes[0] 或 类 似 的 节点 选取 ,可 以 使 
用 firstElementChild lastElementChild 代替 。 
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在 HTML DOM 中 ,attribute 对 象 表示 HTML 属性 ,NamedNodeMap 对 象 表示 元 
素 属性 节点 的 无 序 集 合 , 其 中 的 节点 可 通过 名 称 或 索引 访问 。 
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attribute 对 象 的 常用 属性 和 方法 见 表 9. 8。 
表 9.8 attribute 对 象 的 常用 属性 和 方法 





























属性 名 /方法 名 描 述 
name 返回 属性 的 名 称 

常用 属性 | value 设置 或 返回 属性 的 值 
length 返回 NamedNodeMap 中 的 节点 数 
getNamedItemCname) 从 NamedNodeMap 返回 具有 指定 名 称 name 的 属性 节点 
setNamedItem( name) 通过 名 称 name 设置 或 添加 指定 的 属性 节点 

We removeNamedItem(name) 通过 名 称 name 删除 指定 的 属性 节点 
item(index) 返回 NamedNodeMap 中 位 于 指定 下 标 index 的 节点 


96 DOM 与 事件 


9.6.1 事件 绑 定 的 方式 


JavaScript 给 DOM 绑 定 事 件 处 理 函 数 , 有 以 下 5 种 方式 。 
(1) HTML 的 DOM 元 素 支 持 onclick .onchange 等 以 on 开头 的 属性 ,可 以 直接 在 这 
些 属 性 值 中 编写 JavaScript 代码 。 当 单 击 div 的 时 候 , 下 面 的 代码 会 弹出 div 的 id。 


<div id= "outsetA" onClick= "var id=this.id;alert (id) ;return false;">< /div> 


这 种 做 法 的 缺点 是 : 因为 代码 都 是 放 在 字符 串 里 的 ,不 能 格式 化 和 排版 ,当代 码 很 多 
时 很 难看 懂 。 此 处 ,onClick 属性 中 的 this 代表 的 是 当前 被 单 击 的 DOM 对 象 ,所 以 我 们 
可 以 通过 this. id 获取 DOM 元 素 的 id 属性 值 。 

(2) 当代 码 比 较 多 的 时 候 , 可 以 在 onClick 等 属性 中 指定 函数 名 。 


<script> 
function buttonHandler (thisDom) 
| 
alert (this.id)7 //undefined 
alert (thisDom.id); //outsetA 
return false; 
} 
</script> 


<div id= "outsetA" onClick= "return buttonHandler (this);"></div> 


事件 处 理 函 数 中 的 this 代表 的 是 window 对 象 ,而 onClick 属性 值 中 的 this 代表 
DOM 对 象 并 作为 参数 传递 。 
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(3) 在 JavaScript 代码 中 通过 DOM 元 素 的 onClick 等 属性 绑 定 。 


Var dom= document .getElementById ("outsetA"); 
dom.onClick= function () {alert ("l="+this.iqd);}; 


dom.onClick= function() {alert ("2="+this.id);}; 


这 种 做 法 中 的 this 代表 当前 的 DOM 对 象 。 这 种 做 法 只 能 绑 定 一 个 事件 处 理 函 数 ， 
后 面 的 会 覆盖 前 面 的 。 

(4) 在 IE 下 使 用 attachEvent/detachEvent 函数 进行 事件 绑 定 和 取消 。 

attachEvent/detachEvent 兼容 性 不 好 ,IE6 一 IE11 都 支持 该 函数 ,但 是 FireFox 和 
Chrome 浏览 器 都 不 支持 该 方法 。attachEvent/detachEvent 不 是 W3C 标准 的 做 法 ,所 以 
不 推荐 使 用 。 

(5) 使 用 W3C 标准 的 addEventListener 和 removeEventListener。 

这 两 个 函数 是 W3C 标准 规定 的 ,FireFox 和 Chrome 浏览 器 都 支持 ,IE6/IE7/IE8 都 
不 支持 这 两 个 函数 。 不 过 ,从 IE9 开始 就 支持 了 这 两 个 标准 的 API。 


addEventListener (type, listener, useCapture); 


type: 事件 类 型 ,不 含 "on" ,如 "click" "mouseover" "keydown"。 

listener: 事件 处 理 函数 ; 

useCapture: 代表 事件 骨 泡 类 型 是 事件 骨 泡 ,还 是 事件 捕获 ,默认 为 false。 
Q@ 事件 处 理 函 数 中 this 代表 的 是 DOM 对 象 ,不 是 Window。 


Var dom= document .getElementById ("outsetA"); 


dom.addEventListener ('click', a, false); 


function a() 
E 

alert (this.id);//outsetA 
} 


@ 同一 个 事件 处 理 函 数 可 以 绑 定 两 次 ,一 次 用 于 事件 捕获 ,一 次 用 于 事件 冒 泡 。 


Var dom= document .getElementById ("outsetA"); 
dom.addEventListener('click', a, false); 


dom.addEventListener('click', a, true); 


function a() 
alert (this.id);//outsetR 
} 


当 单 击 outsetA 的 时 候 , 函 数 a 会 调用 2 次 。 
如 果 绑 定 的 是 同一 个 事件 处 理 函数 ,并 且 都 是 事件 冒 泡 类 型 或 者 事件 捕获 类 型 ,那么 
只 能 绑 定 一 次 。 
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Var dom= document .getElementById ("outsetA"); 
dom.addEventListener('click', a, false); 
dom.addEventListener('click', a, false); 


function a() 
| 

alert (this.id);//outsetA 
} 


当 单 击 outsetA 的 时 候 , 函 数 a 只 调用 一 次 。 
@ 不 同 的 事件 处 理 函 数 可 以 重复 绑 定 。 


9.6.2 事件 处 理 函数 的 执行 顺序 
如 果 给 同一 个 事件 绑 定 多 个 处 理 函 数 , 先 绑 定 的 先 执行 ,如 下 例 所 示 。 


<script> 
window.onload= function() { 
Var outA= document .getElementById ("outA"); 
outA.addEventListener ('click', function() {alert (1);}, false); 
outA.addEventListener ('click', function() {alert (2);},true); 
outA.addEventListener ('click', function() {alert (3);},true); 
outA.addEventListener ('click', function() {alert (4);},true); 
»; 
</script> 


<body> 
<div id= "outA" style= "width:400px; height:400px; 
background:#CDC9C9;position:relative;"> 
</div> 

< /body> 


当 单 击 outA 的 时 候 , 会 依次 打印 出 1、2、3、4。 这 里 特别 需要 注意 : 给 outA 绑 定 了 
多 个 onClick 事件 处 理 函 数 , 也 就 是 直接 单 击 outA 触发 的 事件 ,所 以 不 涉及 事件 冒 泡 和 
事件 捕获 的 问题 , 即 addEventListener 的 第 三 个 参数 在 这 种 场景 下 没有 什么 用 处 。 如 果 
是 通过 事件 冒 泡 或 者 是 通过 事件 捕获 触发 outA 的 click 事件 ,那么 函数 的 执行 顺序 会 有 
变化 。 

9.6.3 事件 冒 泡 和 事件 捕获 
HTML 中 的 元 素 是 可 以 嵌 套 的 ,形成 类 似 于 树 的 层次 关系 。 例 如 下 面 的 代码 : 


<div id= "outA" style= "width:400px; height:400px; background:#CDC9C97 


position:relative;"> 





<div id= "outB" style= "height:200; background:#0000ff;top:100px; 


position:relative;"> 
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<div id="outC" style= "height:100px; background:#FFB90F;top:50px; 
position:relative;">< /div> 
</div> 
</div> 


如 果 单 击 了 最 内 侧 的 outC, 那 么 外 侧 的 outB 和 outA 算 不 算 被 单 击 了 呢 ? 很 显然 
算 ,不 然 就 没有 必要 区 分 事件 冒 泡 和 事件 捕获 了 ,对 这 一 点 ,各 个 浏览 器 厂家 也 没有 什么 
疑义 。 假 如 outA、outB、outC 都 注册 了 click 类 型 事件 处 理 函 数 , 当 单 击 outC 的 时 候 ,和 甬 
发 顺序 是 A 一 BC, 还 是 CBA 呢 ? 如 果 浏 览 器 采用 的 是 事件 冒 泡 ,那么 触发 顺序 是 
C-~B-~A, 由 内 而 外 , 像 气 泡 一 样 ,从 水 底 浮 向 水 面 ;如 果 采 用 的 是 事件 捕获 ,那么 触发 顺 
序 是 A 一 BC, 从 上 到 下 , 像 石头 一 样 ,从 水 面 落 入 水 底 。 

一 般 来 说 ,事件 冒 泡 机 制 用 得 更 多 一 些 , 所 以 在 IE8 以 及 之 前 ,IE 只 支持 事件 冒 泡 。 
IE9 十 /FireFox/Chrome 这 两 种 模型 都 支持 ,可 以 通过 addEventListener(type, listener， 
useCapture) 的 useCapture 设 定 , useCapture= false 代表 采用 事件 骨 泡 ,useCapture 一 
true 代表 采用 事件 捕获 ,如 图 9. 1 所 示 。 





Element div 





9.1 事件 冒 泡 和 事件 捕获 


<script> 
window.onload= function() { 
Var outA= document .getElementById ("outA"); 
Var outB= document .getElementById ("outB"); 
Var outC= document .getElementById ("outC"); 


// 使 用 事件 冒 泡 

outA.addEventListener ('click', function() {alert (1);},false); 

outB.addEventListener ('click', function() {alert (2);}, false); 

outC.addEventListener('click', function() {alert (3);}, false); 
BB; 


</script> 
<body> 


<div id= "outA" style= "width:400px; height:400px; background:#CDC9C9; 


position:relative;"> 
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<div id= "outB" style= "height:200; background:#0000ff;top:100px; 
position:relative;"> 
<div id="outC" style= "height:100px; background:#FFB90F;top:50px; 
position:relative;">< /div> 
</div> 
</div> 
< /body> 


以 上 代码 使 用 的 是 事件 冒 泡 , 当 单 击 outC 的 时 候 , 打 印 顺 序 是 3 一 2 一 1。 如 果 将 
false 改 成 true 使 用 事件 捕获 , 则 打印 顺序 是 1>2 一 3。 


97 项 目 : 诗词 鉴赏 


1. 项 目 说 明 


在 HTML 页 面 中 放置 单行 文本 框 和 *“ 换 一 首 诗 "按钮 ,在 文本 框 中 输入 诗 的 第 一 句 ， 
单 击 “ 换 一 首 诗 " 按 钮 ,将 文本 框 输 入 的 第 一 句 显示 在 左 侧 区 域 。 

继续 放置 单行 文本 框 和 “添加 ”按钮 ,在 文本 框 中 继续 输入 诗 的 下 一 句 , 单 击 “ 添 加 ” 按 
钮 ,将 下 一 句 显示 在 左 侧 区 域 之 前 诗句 的 下 方 。 

继续 放置 单行 文本 框 和 * 改 颜色 ?按钮 ,在 文本 框 中 输入 颜色 名 称 , 如 “red”“blue”, 单 
击 “ 改 颜色 ”按钮 ,将 左 侧 区 域 中 的 文本 颜色 改 为 相应 的 颜色 。 诗 词 鉴赏 页 面 如 图 9. 2 
所 示 。 
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图 9.2 诗词 鉴赏 页 面 


2. 项 目 设 计 


本 项 目 是 一 个 对 JavaScript DOM( 文 档 对 象 模型 ) 对 象 的 各 个 常用 方法 的 使 用 实例 。 
在 本 项 目 中 ,需要 利用 document 对 象 的 方法 获取 HTML 页 面 上 的 各 个 指定 元 素 ， 
并 获取 和 修改 对 应 元 素 的 内 容 。HTML DOM 定义 了 一 整套 访问 和 处 理 HTML 文档 元 
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素 的 标准 方法 。 通 过 DOM, 可 以 访问 所 有 的 HTML 元 素 以 及 它们 所 包含 的 文本 和 属 
性 ,也 可 以 对 其 中 的 内 容 进 行 修 改 和 删除 或 者 创建 新 的 元 素 。document 对 象 就 是 
HTML DOM 的 一 个 实例 ,可 以 使 用 它 的 方法 访问 和 操作 HTML DOM 元 素 。 

在 本 项 目 中 ,利用 document 对 象 的 getElementsByName() 、getElementsByTagName () 
方法 获取 指定 元 素 , 并 使 用 event 对 象 和 element 对 象 的 常用 属性 获取 和 设置 相关 内 容 。 

(1) 在 HTML 页 面 的 主体 部 分 放置 第 一 个 文本 框 (name 二 "txt1"), 并 设置 其 
onFocus 事件 的 处 理 函 数 为 clr() ,用 于 当 文 本 框 获得 焦点 时 ,清空 文本 框 中 的 内 容 。 

(2) 当 在 文本 框 上 发 生 onFocus 事件 时 ,会 调用 clr() 函 数 并 将 当前 事件 对 象 event 
作 参 数 传递 到 clr() 函 数 。 在 clr() 函 数 中 ,使 用 event 对 象 的 srcElement 属性 获取 当前 
发 生 事件 的 element 对 象 ( 即 第 一 个 文本 框 ) ,并 设置 其 value 属性 为 空 ( 即 清空 文本 框 中 
的 内 容 ) 。 

(3) 对 “ 换 一 首 诗 ”按钮 添加 onClick 事件 并 设置 事件 处 理 函 数 为 ChangeContent() 。 
在 ChangeContent() 函 数 中 ,使 用 document 对 象 的 getElementsByName() 方 法 获取 名 为 
“txt1” 的 元 素 集合 ,使 用 document 对 象 的 getElementsByTagName() 方 法 获取 标签 名 为 
“div” 的 元 素 集 合 。 需 要 注意 的 是 ,这 两 个 方法 均 返 回 元 素 集 合 ,需要 使 用 下 标 访问 其 中 
的 某 一 个 元 素 。 使 用 element 对 象 的 innerHTML 属性 将 左 侧 显示 区 域 二 div 二 标签 体内 
容 设置 为 文本 框 中 输入 的 内 容 ( 在 文本 框 中 输入 的 内 容 使 用 element 对 象 的 value 属性 
获取 ) 。 

(4) 其 余 功能 的 实现 与 上 面 使 用 的 属性 和 方法 类 似 , 在 此 不 再 著述 。 


3. 项 目 实施 








本 项 目 代 码 如 下 。 


<html> 
<head> 
<style> 
body{background:url (. ./images/juanzhou.jpg)no- repeat; 
background- position:50%0;} 
#boxl {width:750px;height:350px;padding:10px;margin:140px auto;} 
#box2{font- family: 隶 书 ; font- size:1.5em; font-weight:bold; 
width:300px;height:250px;float:left;margin:40px 
10px;padding:10px;text- align:center;letter- spacing:2px;} 
#box3{width:350px;height:250px;padding:100px 10px; float:right} 
img{position:relative;right:- 150px;border- radius:15px} 
</style> 
< script language= "JavaScript"> 
function ChangeColor (){ 
Var color= document .getElementsByName ("colorpanel"); 
document .getElementById ("box2") .style.color= color[0] .value; 
} 
function ChangeContent (){ 
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Var tl= document .getElementsByName ("txt1"); 
var divl= document .getElementsByTagName ("div"); 
div1l[1] .innerHIMI—= "<p> "+t1[0] .value+ "<p>"; 
} 
function hide(){ 
document .getElementById ("box2") .style.display= "none"7 
} 
function show (){ 
document .getElementById ("box2") .style.display= "block"; 
} 
function agdd(){ 
Var t2= document .getElementsByName ("txt2"); 
var div2= document .getElementsByTagName ("div"); 
div2[1] .innerHTML+="<p>"+t2[0] .value+ "< /p> "; 
} 
function clr (event){ 
event.srcElement .value=""; 
} 
</script> 
< /head> 
<body> 
<div id= "boxl"> 
<div id= "box2"><p> 离 离 原 上 草 < /p>< /div> 
<div id= "box3"> 
<!-- 改 内 容 --> 
<input type= "text" name= "txtl" onFocus="clr (event)"> 
<button onClick= "ChangeContent () "> 换 一 首 诗 < /button><br><br> 
< 上 -添加 内 容 --> 
下 一 句 诗 
< input type= "text" name= "txt2"”onFocus= "clr (event)"> 
<button onClick= "add()"> 添 加 < /button><br><br> 
<45= 背 景色 ==3 
< input type= "color" name= "colorpanel"> 
<button onClick= "ChangeColor()"> 改 颜色 < /button><br><br> 
< 二 -隐藏 .显示 --> 
<button onClick= "hide () "> 隐藏 < /button> 
<button onClick= "show()"> 显 示 < /button><br><br> 
</div> 
</div> 
< /body> 
</html> 


将 以 上 HTML 文件 保存 为 “诗词 鉴赏 . html”, 使 用 浏览 器 打开 ,输入 诗 的 下 一 句 , 单 
击 “ 添 加 ”按钮 ,输入 颜色 名 称 , 单 击 “ 改 颜色 ”按钮 ,并 单 击 “ 隐 藏 "? 和 “显示 ”按钮 ,观察 页 面 
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上 的 输出 信息 。 
4. 知识 运用 


在 以 上 HTML 页 面 中 添加 输入 诗 名 与 诗作 者 的 文本 框 ,并 放置 相应 的 “添加 ”按钮 ， 
单 击 “ 添 加 ”按钮 后 ,将 诗 名 和 诗作 者 信息 显示 在 左 侧 区 域 ,效果 如 图 9. 3 所 示 。 
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图 9.3 添加 诗 名 和 作者 


98 咖啡 商城 一 一 购物 车 模块 实现 


本 项 目 要 实现 的 功能 属于 综合 项 目 中 的 购物 车 页 面 中 的 功能 模块 。 本 项 目 要 利用 本 
章 学 习 的 JavaScript 技术 实现 综合 项 目 中 的 购物 车 页 面 的 金额 计算 和 显示 。 

(1) 可 以 利用 JavaScript 的 事件 处 理 机 制 完 成 对 全 选 控件 的 事件 监听 和 事件 处 理 ， 
并 使 用 JavaScript 的 document 对 象 的 方法 获取 选中 商品 的 总 价 进行 总 金额 计算 ,并 把 计 
算 结 果 显 示 在 指定 的 某 个 HTML 元 素 中 。 

(2) 同时 ,也 可 以 利用 JavaScript 的 事件 监听 机 制 监 听 商 品 个 数 文本 框 的 内 容 变 化 
事件 ,一 旦 个 数 发 生变 化 ,就 重新 计算 商品 总 金额 并 显示 。 


9.8.1 项 目 说 明 


使 用 浏览 器 打开 “购物 车 . html” 页 面 ,选中 要 购买 的 商品 .输入 商品 数量 ,观察 显示 商 
品 件数 和 总 金额 的 区 域 , 随 之 发 生变 化 ,如 图 9.4 所 示 。 

在 本 项 目 中 ,主要 完成 以 下 4 个 功能 。 

(1) 实现 购物 车 中 所 有 商品 的 全 选 和 取消 全 选 的 功能 。 

(2) 实现 计算 所 有 选中 的 商品 的 个 数 和 总 金额 的 功能 。 

(3) 实现 选中 商品 的 个 数 和 总 金额 显示 的 功能 。 

(4) 实现 修改 购买 商品 个 数 , 则 选中 商品 的 个 数 和 总 金额 也 随 之 变化 的 功能 。 


VS 
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图 9.4 购物 车 的 计算 商品 金额 功能 


9.8.2 项 目 设计 
在 本 项 目 中 需要 完成 的 功能 的 设计 思路 如 下 。 
1. 实现 购物 车 中 所 有 商品 的 全 选 和 取消 全 选 的 功能 


对 “全 选 商品 信息 ” 复 选 框 的 onChange 事件 进行 监听 ,编写 该 事件 的 JavaScript 事件 
处 理 函 数 。 当 发 生 onChange 事件 时 ,调用 checkAll() 事 件 处 理 函 数 。 在 checkAll() 中 ， 
根据 复 选 框 的 checked 属性 判断 复 选 框 是 否 处 于 选中 状态 。 若 是 选中 状态 , 则 把 购物 车 
页 面 中 所 有 复 选 框 元 素 的 状态 均 设置 为 true, 即 设置 为 选中 状态 ;和 否则 ,把 购物 车 页 面 中 
所 有 复 选 框 元 素 的 状态 均 设 置 为 false, 即 设置 为 不 选中 状态 。 这 样 就 实现 了 商品 的 全 选 
和 取消 全 选 功能 。 

最 后 ,在 “全 选 商品 信息 ” 复 选 框 的 onChange 事件 处 理 函数 中 调用 计算 总 金额 的 函 
数 cal() ,重新 计算 当前 选中 商品 的 总 金额 。 


2. 实现 计算 所 有 选中 的 商品 的 个 数 和 总 金额 的 功能 


在 计算 所 有 选中 的 商品 的 个 数 和 总 金额 的 函数 cal() 中 ,声明 用 于 保存 选中 商品 个 数 
的 变量 piece 和 保存 选中 商品 总 金额 的 变量 money, 初 值 均 为 0。 循环 遍历 每 一 个 选中 商 
品 对 应 的 显示 商品 总 价 的 二 div 二 元 素 ,商品 个 数 累 计 到 piece 变量 中 ,取出 过 div 之 元 素 
中 的 内 容 即 总 价 , 累 加 到 money 变量 中 。 


3. 实现 选中 商品 的 个 数 和 总 金额 显示 的 功能 
在 cal() 函 数 中 ,循环 遍历 完毕 所 有 的 商品 之 后 ,将 最 终 累 加 得 到 的 计算 结果 显示 到 
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id 为 “piece”" 和 “money” 的 div 元 素 所 标记 的 区 域 中 。 
4. 实现 修改 购买 商品 个 数 , 则 选中 商品 的 个 数 和 总 金额 也 随 之 变化 的 功能 


对 每 个 商品 输入 购买 数量 的 文本 框 的 onChange 事件 进行 监听 ,编写 该 事件 的 
JavaScript 事件 处 理 函 数 count()。 在 count() 函 数 中 获取 商品 的 个 数 和 单价 信息 ,计算 
商品 总 价 , 并 显示 在 用 于 显示 商品 总 价 的 二 div 之 元 素 中 。 最 后 ,调用 cal() 函 数 , 重 新 计 
算 选 中 商品 的 总 金额 和 个 数 。 


9.8.3 项目 实施 


(1) 对 “全 选 商品 信息 ” 复 选 框 的 onChange 事件 进行 监听 ,指定 事件 处 理 函 数 是 
checkAll() 。 


< input type= "checkbox" name="selectAll" onChange="checkAll (event)"> 全 选 商品 信息 </ 
div> 


然后 编写 以 上 复 选 框 的 onChange 事件 处 理 函 数 checkAll() 。 


function checkAll (e){ 
if(e.srcElement .checked) { // 全 选 
Var o= document .getElementsByTagName ("input"); 
for(i=0;i<o.length;i++){ 


if(o[i] .type== "checkbox") o[i] .checked=true; 


else { // 取 消 全 选 
Var o= document .getElementsByTagName ("input"); 
for(i=0;i<o.length;i++){ 
if(o[i] .type== "checkbox") o[i] .checked= false; 


} 
cal ()7 
} 


(2) 编写 计算 总 金额 的 函数 cal() 。 


// 计 算 总 价 
function cal(){ 
Var piece=0; var money= 0; 
Var o= document .getElementsByTagName ("input"); 
for(i=0;i<o.length;i++){ 
if(o[il] .type== "checkbox"){ 
if(o[i] .checkedg&o[i] .name== "goods"){ 
t= document .getElementById("u"+o[i] .id) .innerHTML7 
piecet+=1;money+=Number (t) 7 


194 


于 
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document .getElementById ("piece") .innerHTMI—piece; 
document .getElementById ("money") .innerHTIMI— money .toFixed (2); 
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(3) 编写 购买 数量 的 文本 框 的 onChange 事件 处 理 函数 count() 。 


// 计 算 金额 
function count (x) { 
Var price=document .getElementById("p"+x) .innerHTML7 


Var num= document .getElementById ("n"+ x) .value; 


document .getElementById("u"+x) .innerHTMI= price* num; 


call(); 
} 
习 题 
一 、 不 定 项 选择 题 
1. 单 击 页 面 中 的 按钮 ,使 之 打开 一 个 新 窗口 ,加 载 一 个 网 页 ,以 下 JavaScript 代码 中 
可 行 的 是 ( )。 
A. =input type= "button" value= "new" 


onClick= "open(new. html', blank) "/> 

< 所 input type= "button" value= "new" 
onClick= "window. location 一 mew. html';"/> 
=input type= "button" value= "new" 


onClick=" location. assign(new. html) ;"/> 


. 所 form target="_blank" action= "new. html"> 


=input type= "submit" value= "new"/> 
=/form> 


2. 使 用 JavaScript 向 网 页 中 输出 二 hl 之 hello 一 /hl 二 ,以 下 代码 中 可 行 的 是 ( 


A. 


二 script type 一 "text/javascript "过 
document. write( 所 hl 二 hello 一 /hl 二 ); 
</script> 


< 一 script type= "text/javascript" > 
document. write("<hl>hello</hl>"); 
</script> 
script type= "text/javascript"> 
=hl>hello</hl> 
</script> 


)。 
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D> 
<script type= "text/javascript"> 
document. write("hello"); 
</script> 
</hl> 
3. 分 析 下 面 的 代码 : 


<html> 
<head> 
<Script type= "text/javascript"> 
function writeIt (value) { document .myfm.first text.value=value;} 
</script> 
</head> 
<body bgcolor= "#ffffff"> 
< form name= "myfm"> 
<input type= "text" name= "first text"> 
< input type= "text" name= "second text" onChange= "writeIt (value)"> 
</form> 
< /body> 
</html> 


以 下 说 法 中 正确 的 是 ( Ds 

A. 在 页 面 的 第 二 个 文本 框 中 输入 内 容 后 , 当 鼠 标 离开 第 二 个 文本 框 时 ,第 一 个 文 
本 框 的 内 容 不 变 

B. 在 页 面 的 第 一 个 文本 框 中 输入 内 容 后 , 当 鼠 标 离开 第 一 个 文本 框 时 ,将 在 第 二 
个 文本 框 中 复制 第 一 个 文本 框 的 内 容 

C. 在 页 面 的 第 二 个 文本 框 中 输入 内 容 后 , 当 鼠 标 离开 第 二 个 文本 框 时 ,将 在 第 一 
个 文本 框 中 复制 第 二 个 文本 框 的 内 容 

D. 在 页 面 的 第 一 个 文本 框 中 输入 内 容 后 , 当 鼠 标 离 开 第 一 个 文本 框 时 ,第 二 个 文 


本 框 的 内 容 不 变 
4. 下 面 的 JavaScript 语句 中 ,( ) 实 现 检索 当前 页 面 中 的 表单 元 素 中 的 所 有 文本 
框 ,并 将 它们 全 部 清空 。 


A. for(var i=0;i< forml. elements. length;i 十 十 ) { 
if(forml]. elements[i]. type= = "text") 
forml. elements[i]. value=""; 
} 
B. for(var i=0;i<document. forms. length;i 十 十 ) { 
if(formsL0]. elements[i]. type 一 一"text") 
forms[ 0]. elements[i]. value=""; 


} 


C. if(document. form. elements. type= = "text") 
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form. elements[i]. value=""; 
D. for(var i=0;i<document. forms. length; i 十 十 ){ 
for(var j=0;j<document. forms[i]. elements. length; j 十 十 ){ 
if(document. forms[i]. elements[j]. type= = "text") 
document. forms[i]. elements[j]. value=""; 
} 
} 
5. 在 IE 中 要 想 调整 当前 窗口 的 大 小 为 指定 的 宽 和 高 ,可 以 使 用 window 对 象 
的 ( ) 方 法 。 
A. windowX B. resizeTo C. moveTo D. windowLeft 
6. 下 面 关于 JavaScript 中 的 单 选 按 钮 (Radio) ,说 法 正确 的 是 ( hs 
A. 单 选 按钮 可 以 通过 单 击 “ 选 种 ”和 “未 选中 ”选项 进行 切换 
B. 单 选 按钮 没有 checked 属性 
C. 单 选 按钮 支持 onClick 事件 
D. 单 选 按钮 的 length 属性 返回 一 个 选项 组 中 单 选 项 的 个 数 
7. 在 某 一 页 面 下 载 时 ,要 自动 显示 出 另 一 页 面 , 可 通过 在 二 body 之 中 使 用 ( ) 事 
件 完成 。 
A. onLoad B. onUnload C. onClick D. onChange 
8. 在 HTML 页 面 中 ,下 面 关于 window 对 象 的 说 法 不 正确 的 是 (  )。 
A. window 对 象 表示 浏览 器 的 窗口 ,可 用 于 检索 有 关 窗 口 状态 的 信息 
B. window 对 象 是 浏览 器 所 有 内 容 的 主 容器 
C. 浏览 器 打开 HTML 文档 时 ,通常 会 创建 一 个 window 对 象 
D. 如 果 文 档 定义 了 多 个 框架 ,浏览 器 只 为 原始 文档 创建 一 个 window 对 象 ,无 须 


为 每 个 框架 创建 window 对 象 
9. 在 JavaScript 中 ,表单 文本 框 (Text) 不 支持 的 事件 包括 ( }s 
A. onBlur B. onLostFocused 
C. onFocus D. onChange 
10. 在 JavaScript 中 ,命令 按钮 (Button) 支 持 的 事件 包括 ( je 
A. onClick B. onChange C. onSelect D. onSubmit 
二 、 综 合 题 


1. 补充 按钮 事件 的 函数 ,确认 用 户 是 否 退 出 当前 页 面 ,确认 之 后 关闭 窗口 。 


<html> 

<head> 

<script type= "text/javascript"> 
function closeWin(){ 


// 在 此 处 添加 代码 
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</script> 
< /head> 
<body> 
<input type= "button" value= "关闭 窗口 " onClick="closeWin()"/> 
< /body> 
</html> 


2. 完成 fooO) 函数 的 内 容 ,要求 能 够 弹出 对 话 框 ,提示 当前 选中 的 是 第 几 个 单 选 框 。 


<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 
</head> 
<body> 
<scripttype= "text/javascript"> 
function foo() { 

// 在 此 处 添加 代码 
</script> 
<body> 
<form name="forml" onSubmit="returnfoo();"> 
<input type="radio" name="radioGroup"/> 
<input type="radio" name="radioGroup"/> 
<input type="radio" name="radioGroup"/> 
<input type="radio" name="radioGroup"/> 
<input type="submit"/> 
< /form 
< /body> 
</htm> 


3. 完成 函数 showImg() ,要 求 能 够 动态 根据 下 拉 列 表 的 选项 变化 更 新 图 片 的 显示 。 


<body> 
<script type= "text/javascript"> 
function showImg (oSel) { 
// 在 此 处 添加 代码 
» 
</script> 
< img id= "pic" src="imgl.jpg" width= "200" height="200" /> 
<he /> 
<select id="sel" onChange= "showImg (this)"> 
<option value= "imgl"> 城 市 生活 < /option> 
<option value= "img2"> 都 市 早报 < /option> 
<option value= "img3"> 青 山 绿 水 < /option> 
</select>< /body> 


ER 













4. 设计 含有 一 个 表单 的 页 面 ,并 在 表单 中 放 入 一 个 文本 框 。 编 写 JavaScript 程序 ， 
当 鼠 标 在 页 面 上 移动 时 ,将 鼠标 的 坐标 显示 在 这 个 文本 框 中 。 实 现 如 图 9. 5 所 示 的 
效果 。 

5. 在 页 面 上 放置 两 个 多 选 下 拉 列 表 , 用 户 在 左 侧 列表 中 选择 任意 项 ,可 以 通过 “之 二 ” 
按钮 添加 到 右 侧 列表 中 ,也 可 以 通过 "二 二 ”按钮 将 其 从 右 侧 列表 移 回 到 左 侧 列表 中 。 编 
写 JavaScript 程序 ,实现 如 图 9.6 所 示 的 效果 。 





[wa] 
图 9.5 页 面 示例 图 9.6 页 面 示例 





Canvas 画布 


本 章 概 述 


通过 本 章 的 学 习 , 学 生 能 够 了 解 HTML5 的 新 增 元 素 canvas 的 作用 和 用 法 ,学 会 使 
用 Canvas 提供 的 类 和 接口 进行 编程 。 通 过 实际 案例 的 编写 过 程 ,学 习 Canvas 常用 类 和 
接口 的 使 用 ,体会 Canvas 的 主要 功能 ,记忆 Canvas 常用 API 的 使 用 格式 。 

学 习 重 点 与 难点 

重点 : 

(1) canvas 元 素 的 作用 ,在 Canvas 中 绘图 的 常用 API 的 使 用 。 

(2) 编写 JavaScript 绘图 代码 。 

难点 : 

(1) 在 Canvas 中 绘制 常见 图 形 ,如 短 形 直线、 弧 线 等 使 用 的 API。 

(2) 在 Canvas 中 对 图 像 进 行 绘制 、 缩 放 、 裁 剪 、 位 移 等 操作 。 

重点 及 难点 学 习 指导 建议 : 

。 先 掌 握 Canvas 的 绘制 基本 图 形 的 方法 ,通过 绘制 一 些 简单 图 形 理解 Canvas 的 
作用 。 
体会 使 用 JavaScript 进行 泻 染 的 方式 。 
。 掌握 Canvas 中 关于 图 像 变 换 的 方式 的 使 用 。 
通过 每 一 节 的 项 目 案例 记忆 和 巩固 常用 方法 的 使 用 。 
。 在 此 基础 上 独立 完成 每 个 章节 中 的 知识 运用 部 分 ,体会 使 用 到 的 知识 点 的 具体 

作用 。 
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101 绘制 基本 图 形 


HTML5 是 下 一 代 的 HTML, 它 的 上 一 个 版 本 诞生 于 1999 年 。1999 年 12 月 , W3C 
网 络 标准 化 组 织 推出 HTML4. 01, 按 W3C 最 初 的 设想 ,HTML4. 01 应 该 是 HTML 规范 
的 最 后 一 个 版 本 ,此 后 将 使 用 XHTML 取而代之 ,但 Web 开发 人 员 显 然 更 希望 使 用 改良 
式 的 解决 方案 。2014 年 10 月 29 日 ,W3C 宣布 ,经 过 近 8 年 的 艰苦 努力 ,HTMEL5 标准 规 
范 终于 制定 完成 。HTML5 的 设计 目的 是 为 了 在 移动 设备 上 支持 多 媒体 。 新 的 语法 特征 
被 引进 ,以 支持 这 一 点 ,如 video .audio 和 canvas 标签 。HTML5 还 引进 了 新 的 功能 ,可 
以 真正 改变 用 户 与 文档 的 交互 方式 。HTML5 是 开放 Web 标准 的 基石 , 它 是 一 个 完整 的 
编程 环境 ,适用 于 跨 平台 应 用 程序 、 视 频 和 动画 、 图 形 、 风 格 、 排 版 和 其 他 数字 内 容 发 布 工 
具 ,广泛 的 网 络 功能 等 。HTML5 将 成 为 HTML、XHTML 以 及 HTML DOM 的 新 标 
准 。Safari4 十 .Chrome、Firefox、Opera 以 及 Internet Explorer 9 十 都 已 支持 HTML5。 








10.1.1 认识 Canvas 


HTML5 的 canvas 元 素 是 为 了 客户 端 撩 量 图 形 而 设 计 的 。 需 要 注意 的 是 ,canvas 只 
是 图 形容 器 ,绘制 图 形 需要 使 用 JavaScript 泻 染 。 在 JavaScript 中 通过 调用 绘图 API 在 
canvas 上 绘图 。 

< 一 canvas 二 标签 由 Apple 在 Safari 1.3Web 浏览 器 中 引入 。 对 HTML 的 这 一 根本 
扩展 的 原因 在 于 ,HTML 在 Safari 中 的 绘图 能 力也 为 Mac OS X 桌面 的 Dashboard 组 件 
所 使 用 ,并 且 Apple 希望 有 一 种 方式 在 Dashboard 中 支持 脚本 化 的 图 形 。Firefox 1.5 和 
Opera 9 浏览 器 也 都 支持 二 canvas 之 标签 。 也 可 以 在 IE 中 使 用 二 canvas 二 标签 ,并 在 IE 
的 VML 支持 的 基础 上 用 开源 的 JavaScript 代码 (由 Google 发 起 ) 构 建 兼容 性 的 画布 。 

canvas 是 一 个 矩形 区 域 , 我 们 可 以 使 用 相关 绘图 API 控制 其 每 一 个 像素 ,从 而 完成 
在 canvas 上 绘制 路 径 .矩形 、 圆 形 .字符 以 及 图 像 的 操作 。 


10.1.2 Canvas 的 常用 属性 和 方法 


若 要 在 HTML 页 面 中 使 用 canvas 元 素 , 需 要 先 创建 canvas 元 素 。 
向 HTML 页 面 添加 canvas 元 素 , 并 规定 元 素 的 id 宽度 和 高 度 , 可 使 用 如 下 语句: 





<canvas id= "myCanvas"” width="400" height= "300"> 


</canvas> 


canvas 元 素 本 身 是 没有 绘图 能 力 的 。 所 有 的 绘制 工作 必须 在 JavaScript 内 部 完成 。 
创建 一 个 JavaScript 初始 化 函数 ,使 这 个 函数 在 页 面 加 载 的 时 候 就 执行 ,同时 在 函数 里 调 
用 相应 的 API 画图 就 可 以 了 。 

Canvas 对 象 的 常用 属性 和 方法 见 表 10. 1。 
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属性 名 /方法 名 


表 10.1 Canvas 对 象 的 常用 属性 和 方法 


描 述 





常用 属性 


height 


表示 画布 的 高 度 。 和 一 幅 图 像 一 样 ,这 个 属性 可 以 
指定 为 一 个 整数 像素 值 或 者 是 窗口 高 度 的 百分比 。 
当 这 个 值 改 变 的 时 候 , 在 该 画布 上 已 经 完成 的 任何 
绘图 都 会 被 擦 除 ,默认 值 是 300 





width 


表示 画布 的 宽度 。 和 一 幅 图 像 一 样 ,这 个 属性 可 以 
指定 为 一 个 整数 像素 值 或 者 是 窗口 宽度 的 百分比 。 
当 这 个 值 改 变 的 时 候 , 在 该 画布 上 已 经 完成 的 任何 
绘图 都 会 被 控 除 ,默认 值 是 300 





常用 方法 





getContext(contextID) 





返回 一 个 用 于 在 画布 上 绘图 的 环境 ,返回 的 是 
CanvasRenderingContext2D 对 象 ,该 对 象 实现 了 一 个 
画布 使 用 的 大 多 数 方法 。 参 数 contextID 指定 了 想 
要 在 画布 上 绘制 的 类 型 。 目 前 唯一 的 合法 值 是 "2d"， 
它 指定 了 当前 的 绘图 类 型 是 二 维 绘图 


10.1.3 使 用 Canvas 绘图 对 象 绘制 基本 图 形 
通常 ,我 们 都 是 通过 JavaScript 在 canvas 上 绘制 图 形 的 。 一 般 需要 以 下 几 个 步骤 。 


1. 添加 初始 化 javaScript 函数 


<script> 


window.onload= function() { 


// 在 此 添加 绘图 代码 


»; 
</script> 


2. 使 用 id 寻找 canvas 元 素 


Var canvas= document .getElementById ("myCanvas"); 


3. 创建 context 对 象 


Var context= canvas .getContext ("2d"); 


getContext("2d") 获得 的 24 上 下 文 绘图 环境 对 象 是 内 建 的 HTML5 对 象 , 拥 有 多 
种 绘制 路 径 、 和 矩形、 圆 形 、 字 符 以 及 添加 图 像 的 方法 。 

















.0) 区 
4. 坐标 
这 里 还 要 明确 一 下 在 绘制 图 形 的 过 程 中 坐标 的 
概念 。 如 图 10. 1 所 示 ,在 画布 上 绘图 时 ,以 画布 的 左 
上 角 为 坐标 系 原点 ,X 轴 沿 水 平方 向 从 左 至 右 延 伸 ， 
YY 轴 沿 垂直 方向 从 上 至 下 延伸 ,可 以 使 用 X 和 YY 坐 图 10.1 canvas 的 坐标 
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标 在 画布 上 对 绘画 进行 定位 。 

1) 绘制 矩形 

例如 ,绘制 一 个 红色 的 矩形 ,矩形 的 左上 角 在 画布 中 的 坐标 为 (0,0) ,矩形 宽 80 像素 ， 
高 100 像素 ,结果 如 图 10. 2 所 示 。 

<canvas id= "myCanvas">< /canvas> 


<script type= "text/javascript"> 
Var canvas= document .getElementById ('myCanvas"'); // 获 取 画 布 对 象 


Var ctx= canvas.getContext("2d")7 // 获 取 context 对 象 
ctx.fillStyle= '#FEF0000'; // 设 置 填充 颜色 为 红色 
ctx.fillRect (0,0,80,100); // 人 (起 点 坐标 ,y 起 点 坐标 ,宽度 ,高 度 ) 
</script> 





图 10.2 绘制 矩形 


绘制 矩形 的 常用 方法 见 表 10. 2。 
表 10.2 绘制 矩形 的 常用 方法 
方 法 名 描 述 





创建 矩形 ,x 和 y 代表 矩形 左上 和 角 的 坐标 , width 和 height 代表 矩形 


rect(xyyy width ,height) 的 宽度 (以 像素 计 ) 





绘制 “被 填充 ”的 矩形 ,x 和 y 代表 矩形 左上 角 的 坐标 , width 和 


fillRect(x,y, width ,height) height 代表 矩形 的 宽度 (以 像素 计 ) ,默认 颜色 是 黑色 





绘制 矩形 (无 填充 ),x 和 y 代 表 矩 形 左上 角 的 坐标 , width 和 height 


strokeRect(x,y, width,height) 代表 矩形 的 宽度 (以 像素 计 ) ,默认 颜色 是 黑色 





在 给 定 的 矩形 内 清除 指定 的 像素 ,x 和 y 代表 矩形 左上 角 的 坐标 ， 


clearRect(x,y, width ,height) width 和 height 代表 矩形 的 宽度 (以 像素 计 ) 





2) 绘制 直线 
例如 , 绘制 如 图 10. 3 所 示 的 直线 。 


< script type= "text/javascript"> 

Var c= document .getElementById ("myCanvas"); 
Var cxt=c.getContext ("2d"); 

cxt .moveTo (10,10); 
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cxt .lineTo (150, 50); 
cxt.lineTo(10,50); 
cxt.stroke (); // 描 边 


</script> 


3) 绘制 圆 形 
圆 形 的 绘制 角度 如 图 10. 4 所 示 。 


L535"p] 
结束 角 
0.5*PI 
图 10.3 绘制 直线 图 10.4 圆 形 的 绘制 角度 


使 用 arc() 方 法 绘制 圆 形 ,其 参数 构成 如 下 ,参数 说 明 见 表 10. 3。 
Context .arc (x,y,r, sAngle, eAngle, counterclockwise); 


表 10.3 arc() 参 数 说 明 




















参数 描 述 
闫 圆 的 中 心 的 x 坐标 
区 圆 的 中 心 的 y 坐标 
r 圆 的 半径 
sAngle 起 始 角 ,以 弧度 计 ( 弧 的 圆 形 的 三 点 钟 位 置 是 0°) 
eAngle 结束 角 ,以 弧度 计 
counderal die 可 选 。 规 定 应 该 是 逆 时 针 绘 图 ,还 是 顺 时 针 绘 图 。False 一 顺 时 针 ， 
True 王道 时 针 





例如 ,绘制 圆 形 ,如 图 10. 5 所 示 。 


<script type= "text/javascript"> 
Var c= document .getElementById ("myCanvas"); 
Var cxt=c.getContext ("2d"); 


cxt.fillStyle="#FF0000"; // 设 置 填充 颜色 为 红色 
cxt.beginPath ()7 // 开 始 新 路 径 
cxt.arc(70,118,15,0,Math.PI* 2,true); // 绘 制 圆 形 路 径 
Cxt.closePath () 7 // 关 闭路 径 

El 人 // 填 充 颜 色 
</script> 


4) 路 径 
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Canvas 里 有 路 径 的 概念 。 路 径 可 以 理解 成 通过 画笔 画 出 的 任意 线条 ,这 些 线条 甚至 
不 用 相连 。 在 没 描 边 (stroke) 或 是 填充 (fill) 之 前 ,路 径 在 canvas 上 是 看 不 到 的 。 

CanvasRenderingContext2D 提供 了 一 系列 方法 绘制 路 径 。 

arc() .rect() ,lineTo() 等 方法 能 建立 连续 的 路 径 , 不 能 自动 闭合 ,fillRect() 方 法 可 以 


建立 闭合 路 径 。 


利用 beginPath() .closePath() 可 以 建立 新 的 路 径 。 
例如 ,在 画布 上 绘制 两 条 交叉 路 径 , 分 别 为 红色 和 蓝 色 ,如 图 10.6 所 示 。 


图 10.5 绘制 圆 形 


提示 : beginPath() 方 法 用 于 





图 10.6 绘制 路 径 





FF 开始 一 条 路 径 ,或 重 置 当 前 的 路 径 。 


提示 : 请 使 用 这 些 方法 创建 路 径 , moveTo() lineTo()、 quadraticCurveTo()、 
bezierCurveTo() ,arcTo() 以 及 arc()。 
提示 : 请 使 用 stroke() 方 法 在 画布 上 绘制 确切 的 路 径 。 


代码 如 下 所 示 。 


<script> 


Var c= document .getElementById ("myCanvas"); 


Var cxt=c.getContext ("2d"); 


Cxt.beginPath () 7 
cxt.lineWidth= "5"7 

Cxt .StrokeStyle= "red"; 
Cxt .moveTo (0, 215); 

cxt .lineTo (250, 275); 
cxt .stroke(); 
Cxt.beginPath () 7 
Cxt.strokeStyle= "blue"; 
cxt .moveTo (0, 300) 7 

cxt .lineTo (250,230) 7 
cxt .stroke(); 


</script> 


// 红 色 路 径 


// 进 行 绘制 


// 蓝 色 路 径 


// 进 行 绘制 


绘制 路 径 的 常用 方法 见 表 10. 4。 


HiMLS+cS§S3+Javeseript 玉 四 用 眉 























表 10.4 ”绘制 路 径 的 常用 方法 
方法 名 描述 
fillO 填充 当前 绘图 (路 径 ) ,默认 颜色 是 黑色 
ey 会 实际 绘制 出 通过 moveTo() 和 lineTo() 方法 定义 的 
pe 路 径 ,默认 颜色 是 黑色 
beginPath() 起 始 一 条 路 径 , 或 重 置 当前 路 径 
ey 把 路 径 移动 到 画布 中 的 指定 点 ,不 创建 线条 ,x 和 y 代 
表 路 径 的 目标 位 置 的 xy 坐标 
closePath() 创建 从 当前 点 回 到 起 始点 的 路 径 
A 添加 一 个 新 点 (x,y) ,然后 在 画布 中 创建 从 该 点 到 最 后 
0 指定 点 的 线条 
clipO) 从 原始 画布 剪 切 任意 形状 和 尺寸 的 区 域 





quadraticCurveTo(Ccpxycpyy,xyy) 


创建 二 次 方 贝 塞 尔 曲线 ,cpx 和 cpy 分 别 代 表 贝 塞 尔 控 
制 点 的 xy 坐标 ,x 和 y 分 别 代表 结束 点 的 x\y 坐标 





bezierCurveTo(cplx,cply,cp2x,cp2y, x,y) 


创建 三 次 方 贝 塞 尔 曲线 ,cplx 和 cply 分 别 代表 第 一 个 
贝 塞 尔 控制 点 的 xy 坐标 ,cp2x 和 cp2y 分 别 代 表 第 二 
个 贝 塞 尔 控制 点 的 x\y 坐标 ,x 和 y 分 别 代表 结束 点 的 
xy 坐标 





arc(x,y,r,sAngle,eAngle,counterclockwise) 


创建 弧 / 曲 线 ( 用 于 创建 圆 形 或 部 分 圆 ),x 和 y 分 别 代 
表 圆 心 的 xy 坐标 ,r 代表 圆 的 半径 ,sAngle 和 eAngle 
分 别 代表 起 始 角 和 结束 角 , 以 弧度 计 ( 弧 的 圆 形 的 三 点 
钟 位 置 是 0") ,counterclockwise 是 可 选 参 数 ,代表 应 该 
是 逆 时 针 绘画 , 还 是 顺 时 针 绘图 ,False 代表 顺 时 针 ， 
True 代表 北 时 针 








arcTo (x, y, r, sAngle, eAngle, counterclo- 


ckwise) 


创建 两 切线 之 间 的 弧 / 曲 线 ,x 和 y 代表 圆心 的 x、y 坐 
标 ,r 代表 圆 的 半径 ,sAngle 和 eAngle 分 别 代表 起 始 角 
和 结束 角 , 以 弧度 计 ( 弧 的 圆 形 的 三 点 钟 位 置 是 0")， 
counterclockwise 是 可 选 参数 ,代表 应 该 逆 时 针 还 是 顺 
时 针 绘 图 ,False 代表 顺 时 针 ,True 代表 逆 时 针 





isPointInPath(x,y) 


5) 绘制 渐变 背景 
线形 渐变 指 的 是 一 条 直线 上 发 生 
图 10.7 所 示 ,代码 如 下 。 





如 果 指 定 的 点 (x,y) 位 于 当前 路 径 中 , 则 返回 True, 否 
则 返回 False 





的 渐变 ,可 以 用 填充 的 方式 绘制 渐变 背景 色 , 如 


10.7 渐变 填充 
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<script type= "text/javascript"> 

Var c= document .getElementById ("myCanvas"); 
Var cxt=c.getContext ("2d"); 

Var grd=cxt .createLinearGradient (0, 0,175, 50); 
grd.addColorstop (0, "#FF0000"); 
grd.addColorStop (1, "#00FF00"); 
cxt.fillstyle=grd; 

cxt .fillRect (0,0,175,50); 

</script> 


(1) createLinearGradient 用 于 创建 一 个 线形 渐变 对 象 ,(0,0) 表 示 渐 变 的 起 点 ， 
(175,50) 表 示 渐 变 的 终点 。 

(2) addColorStop 在 某 处 添加 渐变 颜色 值 。 

(3) fillStyle 把 渐变 对 象 作为 填充 样式 。 

(4) 调用 fil 及 其 他 相关 图 形 进 行 渐变 填充 。 

6) 绘制 图 像 

例如 ,将 图 片 flower. png 绘制 在 画布 上 ,如 图 10. 8 所 示 ,代码 如 下 。 





<Script type= "text/javascript"> 

Var c= document .getElementById ("myCanvas"); 
Var cxt=c.getContext ("2d"); 

Var img=new Image (); 

img.src= "flower.png"; 

cxt .drawImage (img, 0,0); 


</script> 


直接 调用 canvas 的 drawImage() 方 法 首次 
加 载 时 图 片 不 显示 ,解决 方案 是 在 Img. onload() 
方法 中 绘制 图 。 但 是 ,如 果 以 后 需要 不 断 地 绘制 
该 图 片 的 时 候 , 就 会 一 直 调 用 onLoad 事件 ,出现 
图 片 一 闪 一 闪 的 现象 , 解决 方案 是 根据 Img. 
complete() 方 法 判断 图 片 是 否 加 载 完成 。 改 写 后 
的 代码 如 下 。 





图 10.8 绘制 图 像 


< Script type= "text/javascript"> 
Var c= document .getElementById ("myCanvas"); 
Var cxt=c.getContext ("2d"); 
Var img=new Image (); 
img.src= "flower.png"; 
if (img.complete) { // 如 果 图 片 已 经 存在 于 浏览 器 缓存 , 则 直接 调用 回调 函数 
cxt .drawImage (img, 0,0); 
return; // 直 接 返 回 , 不 用 再 处 理 onLoad 事 件 
人 
img.onload= function () {fcxt.drawImage (img, 0,0);} 
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</script> 


drawImage() 方 法 可 以 在 画布 上 绘制 图 像 .画布 或 视频 。drawImage() 方 法 也 能 够 绘 
制图 像 的 某 些 部 分 ,以 及 /或 者 增加 或 减少 图 像 的 尺寸 。 

drawImage() 方 法 有 3 种 原型 ,如 下 所 示 。drawImage 参数 说 明 见 表 10. 5。 

(1) 在 画布 上 定位 图 像 : 


context.drawImage (img, x, y); 

(2) 在 画布 上 定位 图 像 ,并 规定 图 像 的 宽度 和 高 度 : 

context .drawImage (img, x, y, width, height); 

(3) 剪 切 图 像 , 并 在 画布 上 定位 被 前 切 的 部 分 : 

context .drawImage (img, sx, sy, swidth, sheight, x, y,width, height); 


表 10.5 drawImage 参数 说 明 
































参 数 描 述 

img 规定 要 使 用 的 图 像 .画布 或 视频 

SX 可 选 。 开 始 剪 切 的 x 坐标 位 置 

sy 可 选 。 开 始 剪 切 的 y 坐标 位 置 

swidth 可 选 。 被 剪 切 图 像 的 宽度 

sheight 可 选 。 被 剪 切 图 像 的 高 度 

x 在 画布 上 放置 图 像 的 x 坐标 位 置 

% 在 画布 上 放置 图 像 的 y 坐标 位 置 

width 可 选 。 要 使 用 的 图 像 的 宽度 (伸展 或 缩小 图 像 ) 

height 可 选 。 要 使 用 的 图 像 的 高 度 ( 伸 展 或 缩小 图 像 ) 
7) 绘制 文字 


例如 ,使 用 fillTextO 〇 在 画布 上 写 文 本 “中 文 测试 ”, 如 图 10. 9 所 示 。 代 码 如 下 。 


<canvas id= "myCanvas">< /canvas> 

<script> 

Var c= document .getElementById ("myCanvas"); 
Var ctx=c.getContext ("2d"); 


ctx.font="30px Courier New"; // 设 置 字体 样式 

ctx.fillstyle= "blue"; // 设 置 字体 填充 颜色 
ctx.fillText (" 中 文 测试 "，50，50)7 // 从 坐标 点 (50,50) 开 始 绘制 文字 
</script> 


JavaScript 请 法: 


context .fillText (text, x,y,maxWidth); 
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中 文 测试 








图 10.9 绘制 文字 


fillText 参数 说 明 见 表 10. 6。 
表 10.6 fillText 参数 说 明 

















参 数 描 述 

text 规定 在 画布 上 输出 的 文本 

x 开始 绘制 文本 的 x 坐标 位 置 (相对 于 画布 ) 
开始 绘制 文本 的 y 坐标 位 置 (相对 于 画布 7 
maxWidth 可 选 。 允 许 的 最 大 文本 宽度 ,以 像素 计 


10.1.4 项 目 : 来 自 星 星 的 它 


1. 项 目 说 明 

编写 一 个 HTML 页 面 ,使 用 HTML5 提供 的 Canvas, 以 及 在 JavaScript 中 调用 绘图 
的 类 和 接口 方法 ,在 页 面 上 绘制 基本 图 形 的 形状 ,并 为 图 形 填 充 指定 的 颜色 。 

绘制 的 图 形 主要 包括 : 矩形 (机 器 人 的 头 部 .身体 和 四 肢 )、 圆 形 ( 机 器 人 的 眼睛 )、 弧 
形 ( 机 器 人 的 嘴巴 ) 直线 (机 器 人 的 天 线 ) 等 等 。 

“来 自 星星 的 它 ” 页 面 如 图 10. 10 所 示 。 





一 


图 10. 10 “来 自 星星 的 它 ” 页 面 


2. 项 目 设 计 
本 项 目 需要 在 HTML 页 面 上 绘制 一 些 基 本 图 形 ,如 直线 、 弧 线 、 圆 形 、 和 矩形 等 。 
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HTML5 新 引入 的 canvas 元 素 可 以 实现 此 效果 。canvas 用 于 在 HTML 页 面 上 绘制 图 
形 。 实 际 上 ,canvas 在 HTML 页 面 上 标记 出 一 个 矩形 区 域 , 使 用 JavaScript 可 以 控制 这 
个 区 域内 的 每 一 个 像素 。canvas 拥有 多 种 绘制 路 径 .矩形 、 圆 形 . 字 符 以 及 添加 图 像 的 方 
法 。 需 要 注意 ,canvas 元 素 本 身 是 没有 绘图 能 力 的 ,所 有 的 绘制 工作 必须 在 JavaScript 函 
数 中 通过 调用 绘图 环境 对 象 的 方法 完 

本 项 目 就 可 以 通过 在 HTML 页 面 上 添加 一 个 canvas 元 素 , 并 在 canvas 对 应 的 区 域 
中 采用 调用 绘图 环境 对 象 的 方法 进行 直线 、 弧 线 、 圆 形 、 和 矩形 的 绘制 以 及 颜色 的 填充 。 

(1) 首先 ,在 HTML 页 面 主体 部 分 添加 canvas 元 素 , 并 添加 初始 化 JavaScript 函数 。 





<script> 
window.onload= function (){ 
init()7 
</script> 
(2) 在 init() 中 使 用 id 寻找 canvas 元 素 。 
Var canvas= document .getElementById ("myCanvas"); 
(3) 创建 context 对 象 。 


Var context= canvas .getContext ("2d"); 


(4) 调用 robot() 方 法 ,进行 机 器 人 绘制 。 

在 Canvas 对 象 中 利用 2D 绘图 环境 对 象 绘制 机 器 人 图 形 ,主要 分 为 以 下 4 步 。 
绘制 矩形 (机 器 人 的 头 部 ) 。 

绘制 直线 (机 器 人 的 天 线 ) 。 

绘制 圆 形 和 弧 线 ( 机 器 人 的 眼睛 和 嘴巴 ) 。 

绘制 机 器 人 的 身体 和 四 肢 ,方法 与 绘制 机 器 人 头 部 的 方法 一 致 。 

@ 填充 矩形 使 用 fillRect() 方 法 。 指 明 填 充 矩 形 的 左上 角 坐 标 和 和 矩形 的 宽 、 高 。 
绘制 头 部 ,使 用 : 


context .fillStyle= '#3399FFE"; 
context .fillRect (x,y,200,100); 


其 中 ,属性 fillStyle 用 于 设置 或 返回 填充 绘画 的 颜色 .渐变 或 模式 。 默 认 的 填充 颜色 
是 黑色 ,这 里 设置 为 天 蓝 色 (# 3399FF)。fillRect() 方 法 用 于 绘制 填充 颜色 的 矩形 ,颜色 
为 fillStyle 指定 的 颜色 。 

@ 画 直 线 的 功能 可 以 使 用 moveTo() lineTo() 和 stroke() 方 法 的 组 合 实现 。 

绘制 左右 两 根 天 线 ,使 用 : 


Context.moveTo (x+ 50, y); 
context.lineTo (x,y- 60); 
context .moveTo (150+ x, y); 
context.lineTo (200+ x,y- 60); 
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context .strokeStyle= "#0000FF"; 


context .stroke (); 


其 中 ,方法 moveTo() 为 指定 点 创建 了 一 个 新 的 子路 径 , 这 个 点 就 变 成 了 新 的 上 下 文 
点 。 可 以 把 moveTo() 方 法 看 成 是 用 来 定位 绘图 鼠标 用 的 。 方 法 lineTo() 在 以 上 下 文 点 
为 起 点 ,到 方法 参数 中 指定 的 点 之 间 画 一 条 直线 。 属 性 strokeStyle 用 于 设置 画笔 颜色 ， 
这 里 设置 为 蓝 色 (#0000FF) ,方法 stroke() 用 于 绘制 moveTo() 和 lineTo() 方 法 指定 的 
直线 ,并 为 所 画 的 线 赋 予 颜色 。 如 果 没 有 使 用 strokeStyle 指定 颜色 , 则 默认 使 用 黑色 画 
直线 。 

@ 画 圆 形 使 用 arc() 方 法 ,设置 圆心 坐标 以 及 半径 ,将 起 始 角度 设 为 0, 终止 角 度 设 为 
2* Math. Pl。 

绘制 两 个 眼睛 ,使 用 : 


context .fillStyle= "#FFFFOO™"; 

context .beginPath (); 

context .arc (x+ 50, y+ 30, 15, 0, Math .PI * 2,true); 
context.closePath () 7 

Context.fil1()7 

context.beginPath ()7 

Context.arc (x+ 150, y+ 30,15,0,Math.PI#x 2, true); 





Context.closePath () 7 
Context.fill()7 


属性 fillStyle 设置 或 返回 用 于 填充 绘画 的 颜色 .渐变 或 模式 ,这 里 设置 为 黄色 
(并 FFFF00)。beginPath() 和 closePath() 用 于 开始 和 结束 一 个 路 径 。 方 法 arc() 用 于 绘 
制 弧 线 ,只 要 将 弧 线 的 起 始 角 度 设 为 0. 终止 角度 设 为 2 * Math. PI, 就 是 圆 形 。 方 法 fi 
使 用 fillStyle 属性 指定 的 颜色 .渐变 和 模式 填充 当前 路 径 。 

@ 画 弧 线 的 方法 是 arc()。 每 条 弧 线 都 需要 由 中 心 点 `. 半 径 、. 起 始 角 度 ( 弧 度 nx 
Math. PT 结束 角度 (弧度 m* Math. PI) 和 绘图 方向 ( 顺 时 针 false 还 是 道 时 针 true) 这 几 
个 参数 确定 。 

绘制 嘴巴 ,使 用 : 


Context.beginPath () 7 

Context.arc (100+ x, y+ 50, 20,0,Math.PI*x 1,false); 
context .closePath (); 

context .strokeStyle= "#0000FE™"; 

Context.stroke (); 


在 方法 arc() 中 设置 圆心 坐标 半径、 起 始 角 度 为 0, 终止 角度 为 1. 5 * Math. PI, 逆 时 
针 绘 制 。 属 性 strokeStyle 用 于 设置 画笔 颜色 ,这 里 设置 为 蓝 色 (#0000FF), 方 法 stroke() 
用 于 绘制 当前 路 径 的 边框 ,使 用 strokeStyle 设置 的 颜色 绘制 。 

@ 绘制 机 器 人 的 身体 和 四 肢 , 方 法 与 绘制 机 器 人 的 头 部 ( 即 矩形 ) 的 方法 基本 一 致 ， 
在 此 不 再 袭 述 。 


而 ML5+clss+Javastript 昼 四 用 网 


3. 项 目 实施 


使 用 前 面 介绍 的 在 Canvas 中 绘图 的 方法 绘制 机 器 人 的 头 部 天线、 眼睛 和 嘴巴 。 
本 项 目 代码 如 下 。 


<html> 
<head> 
<meta charset= "UTF- 8"> 
<style> 
canvas{position:absolute;} 
#canvas2{2z- index:—1} 
</style> 
<script> 
window.onload= function(){ 
init (); 
3 
function init(){ 
this.x=70;this.y=70;this.d="left"; 
this.canvas= document .getElementById('mycanvas'); 
this.context= canvas .getContext ('2d'); 
robot (70,70); 
C2= document .getElementById('canvas2°'); 
ctx2= c2.getContext ("2d"); 
var image=new Image ()7 
image.src="../images/space4.jpg"7 
image.onload= function(){ 
ctx2.drawImage (image, 0, 0, 1400, 800); 


} 

function robot (x,y) { 
// 头 
context .fillStyle= "#3399FF"; 
context .fillRect (x,y,200,100); 
// 天 线 
context .moveTo (x+ 50, y) ; 
context .lineTo (x,y- 60); 
context .stroke (); 
Context .moveTo (150+ x, y);? 
context.lineTo (200+ x, y- 60); 
context .stroke (); 
// 眼 睛 
context .fillStyle= "#FFFFO00"; 
Context .beginPath (); 
Context .arc (x+ 50, y+ 30, 15,0, Math.PI* 2,true); 





回 
Ey 
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context .closePath () 7 
context .fil]l (); 
context .beginPath (); 
Context .arc (x+ 150, y+ 30, 15, 0, Math.PI* 2,true); 
context .closePath () 7 
context .fil] (); 
// 嘴 
context .beginPath () 7 
Context .arc (100+ x, y+ 50, 20, 0, Math.PI* 1,false); 
context .closePath (); 
Context .strokeStyle= "#0000FF™; 
context .stroke () 7 
// 身 体 
context .beginPath (); 
context .fillRect (x+ 30, y+ 100,140,140); 
// 腹 膊 
Context .fillStyle= "#3399FF"7 
context .fillRect (x- 10, y+ 120, 40, 150); 
context .fillRect (x+ 170, y+ 120, 40, 150); 
// 腿 
context .fillRect (50+ x, 240+ y, 40,150); 
context .fillRect (110+ x, 240+ y, 40, 150); 
$ 
</script> 
< /head> 
<body> 
<canvas id= "mycanvas" width= "1400" height= "800">< /canvas> 
<canvas id= "canvas2" width="1400" height= "800">< /canvas> 
< /body> 
</htm> 


将 以 上 HTML 文件 保存 为 “来 自 星星 的 它 . html” ,使 用 浏览 器 打开 ,观察 页 面 上 夯 
布 的 绘图 效果 。 


4. 知识 运用 


在 以 上 完成 的 HTML 页 面 中 继续 添加 机 器 人 可 以 跟随 鼠标 来 回 移动 的 效果 ,并 且 
添加 腿 部 和 手 部 摆动 的 效果 。 





102 绘制 图 像 


10.2.1 使 用 Canvas 绘图 对 象 裁剪 图 像 
本 节 继 续 利用 10. 1 节 介绍 过 的 HTML5 中 的 Canvas 对 象 进行 图 像 的 绘制 .放大 、 缩 
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小 、 裁 剪 等 操作 。 

首先 ,仍然 使 用 10. 1. 2 节 介绍 的 方法 在 HTML 页 面 中 添加 一 个 canvas 元 素 , 并 在 
JavaScript 函数 中 使 用 document 对 象 的 getElementById() 方 法 找到 这 个 canvas 元 素 ,并 
使 用 getContext() 方 法 得 到 这 个 canvas 元 素 的 2D 绘图 环境 对 象 。 

2D 绘图 环境 对 象 关于 图 像 绘制 的 常用 方法 见 表 10. 7。 


表 10.7 2D 绘图 环境 对 象 关 于 图 像 绘 制 的 常用 方法 


方 法 名 描 述 
drawImage() 向 画布 上 绘制 图 像 .画布 或 视频 


2D 绘图 环境 对 象 使 用 drawImage( ) 方 法 在 画布 上 绘制 图 像 .画布 或 视频 ,也 能 够 使 
用 该 方法 绘制 图 像 的 某 些 部 分 ,或 者 增加 或 减少 图 像 的 尺寸 。 
。 在 画布 上 定位 图 像 : 





context .drawImage (img, x, y); 
。 在 画布 上 定位 图 像 ,并 规定 图 像 的 宽度 和 高 度 : 
context .drawImage (img, x,y, width, height); 
。 前 切 图 像 ,并 在 画布 上 定位 被 剪 切 的 部 分 : 
context .drawImage (img, sx, sy, swidth, sheight,x,y,width, height); 
其 中 ,drawImage() 方 法 的 各 个 参数 含义 见 表 10. 8。 
表 10.8 ”drawImage() 方 法 的 各 个 参数 含义 



































参 数 描 述 

img 规定 要 使 用 的 图 像 .画布 或 视频 

sx 可 选 。 开 始 剪 切 的 x 坐标 位 置 

sy 可 选 。 开 始 剪 切 的 y 坐 标 位 置 

swidth 可 选 。 被 剪 切 图 像 的 宽度 

sheight 可 选 。 被 剪 切 图 像 的 高 度 

x 在 画布 上 放置 图 像 的 x 坐标 位 置 

y 在 画布 上 放置 图 像 的 y 坐标 位 置 

width 可 选 。 要 绘制 的 图 像 的 宽度 (伸展 或 缩小 图 像 ) 
height 可 选 。 要 绘制 的 图 像 的 高 度 ( 伸 展 或 缩小 图 像 ) 














图 像 像素 操作 和 转换 操作 的 常用 属性 和 方法 见 表 10. 9。 


第 190 齐 ”iCanvas 男 布 


表 10.9 图 像 像素 操作 和 转换 操作 的 常用 属性 和 方法 
































属性 名 /方法 名 描 述 
width 返回 ImageData 对 象 的 宽度 
height 返回 ImageData 对 象 的 高 度 
dot 返回 一 个 对 象 , 其 包含 指定 的 ImageData 对 象 的 图 像 数据 
globalAlpha 设置 或 返回 绘图 的 当前 alpha 或 透明 值 
globalCompositeOperation 设置 或 返回 新 图 像 如 何 绘制 到 已 有 的 图 像 上 
创建 新 的 .空白 的 ImageData 对 象 。width 和 height 代表 创 
createImageData(width,height) | 建 的 ImageData 对 象 的 宽度 和 高 度 (以 像素 计 )。 也 可 以 创 
createImageData(imageData) 建 与 指定 的 另 一 个 ImageData 对 象 尺寸 相同 的 新 ImageData 
对 象 ,参数 imageData 代表 另 一 个 ImageData 对 象 
返回 ImageData 对 象 , 该 对 象 为 画布 上 指定 的 矩形 区 域 复 制 
RE 的 像素 数据 。x 和 y 代表 将 要 复制 区 域 的 左上 角 位 置 的 x、y 
Sg | 坐标 ,width 和 height 代表 将 要 复制 的 矩形 区 域 的 宽度 和 
高 度 
把 图 像 数 据 ( 从 指定 的 ImageData 对 象 ) 放 回 到 画布 上 。 
imgData 代表 要 放 回 画布 的 ImageData 对 象 ,x 和 y 代表 
putImageData(imgData, x,y,dirtyX,| ImageData 对 象 左 上 角 的 x、y 坐标 (以 像素 计 ), dirtyX 和 
dirtyY ,dirtyWidth,dirtyHeight) | dirtyY 是 可 选 参数 ,代表 在 画布 上 放置 图 像 的 左上 和 角 位 置 的 
xvy 坐标 , dirtyWidth 和 dirtyHeight 是 可 选 参数 ,代表 在 画 
布 上 绘制 图 像 所 使 用 的 宽度 和 高 度 
缩放 当前 绘图 至 更 大 或 更 小 ,scalewidth 和 scaleheight 代表 
常用 | scale(scalewidth, scaleheight) 缩放 当前 绘图 的 宽度 和 高 度 (1 王 100%,0.5 一 50% ,2 一 
方法 200% , 依 此 类 推 ) 





rotate(angle) 


旋转 当前 绘图 ,angle 代表 旋转 角度 ,以 弧度 计 。 如 需 将 角度 
转换 为 弧度 ,请 使 用 degrees * Math. PI/180 公式 计算 。 
举例 :如 需 旋 转 5" ,可 按 公 式 5 * Math. PI/180 计算 弧度 值 





translate(x,y) 


重新 映射 画布 上 的 (0,0) 位 置 ,即将 画布 左上 角 (0,0) 重 新 映 
射 到 (x,y) 的 位 置 。x 和 y 代表 添加 到 水 平 坐标 x 和 垂直 坐 
标 y 上 的 值 





transform(a,b,c,d,e,f) 


替换 绘图 的 当前 转换 矩阵 , 按 指 定 的 矩阵 转换 当前 的 用 户 
坐标 系 ,a 代表 水 平 缩放 绘图 ,b 代表 水 平 倾斜 绘图 ,c 代表 
垂直 倾斜 绘图 ,d 代表 垂直 缩放 绘图 ,e 代表 水 平移 动 绘图 ,f 
代表 垂直 移动 绘图 








setTransform(a,b,c,d,e,f) 





将 当前 转换 重 置 为 单位 矩阵 ,然后 运行 transform() ,a 代表 
水 平 旋转 绘图 ,b 代表 水 平 倾斜 绘图 ,c 代表 垂直 倾斜 绘图 ,d 
代表 垂直 缩放 绘图 ,e 代表 水 平移 动 绘图 ,f 代 表 垂 直 移 动 
绘图 
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10.2.2 项 目 : 放大 镜 
1. 项 目 说 明 


使 用 HTML5 中 的 Canvas 对 象 完 成 一 个 放大 镜 页 面 。 页 面 左 侧 放置 一 张 原 始 图 
片 , 右 侧 放置 一 个 Canvas 对 象 。 当 鼠标 停 在 左 侧 原始 图 片 的 某 个 位 置 时 ,在 右 侧 的 
Canvas 中 绘制 左 侧 鼠 标 指针 所 指 区 域 的 局 部 放大 图 像 ,如 图 10. 11 所 示 。 





图 10.11 放大 镜 页 面 


2. 项 目 设计 


本 项 目 需要 在 HTML 页 面 指定 区 域 中 对 原始 图 像 进 行 裁剪 和 绘制 。 可 以 使 用 
HTML5 新 引入 的 canvas 元 素 完成 图 像 的 裁剪 和 绘制 功能 。Canvas 提供 了 一 系列 完整 
的 属性 和 方法 ,可 以 实现 图 像 绘制 和 图 像 处 理 。 在 本 项 目 中 使 用 绘图 对 象 的 方法 可 以 按 
照 指定 的 高 度 和 宽度 裁剪 原始 图 像 ,并 在 canvas 标记 的 矩形 区 域 中 绘制 裁剪 后 的 图 像 ， 
这 样 就 完成 了 放大 的 效果 。 

另外 ,需要 对 鼠标 移动 事件 做 事件 处 理 , 在 事件 处 理 函 数 中 获取 当前 鼠标 所 在 位 置 的 
坐标 ,根据 这 个 坐标 设 定 要 裁剪 的 区 域 的 左上 和 角 坐 标 , 即 要 放大 的 区 域 的 左上 和 角 坐 标 。 
JavaScript 的 event 对 象 用 来 表示 事件 的 状态 ,如 键盘 按键 的 状态 、 鼠 标的 位 置 、 鼠 标 按钮 
的 状态 等 。 在 本 项 目 中 可 以 使 用 鼠标 移动 的 事件 处 理 函数 的 传人 参数 event 对 象 获取 到 
发 生 该 事件 时 的 鼠标 坐标 位 置 。 

(1) 在 HTML 页面 主体 部 分 添加 canvas 元 素 . 并 添加 初始 化 JavaScript 函数 。 





<script> 

window.onload= function(){ 
c=document .getElementById ("myCanvas"); 
cxt=c.getContext ("2d"); 
img.src="../images/baby.jpg"; 
cxt .drawImage (img, 0, 0,c.width,c.height); 
} 


</script> 


使 用 document. getElementByld("myCanvas") 找 到 Canvas 对 象 ,调用 canvas. getContext 
("2d") 创 建 2D 绘图 环境 对 象 ,设置 image 对 象 的 src 属性 为 “. . /image/baby. jpg”, 指 向 
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原始 图 片 文件 。 在 Canvas 对 象 中 利用 2D 绘图 环境 对 象 的 drawImage() 方 法 在 画布 中 绘 
制 初始 放大 图 像 。 

这 里 使 用 了 drawImage(img，x，y, width,height) 的 调用 格式 , 即 在 画布 (x,y) 的 位 
置 上 按照 指定 的 width 和 height 绘制 图 像 img, 因 此 ,初始 时 ,画布 区 域 左上 角 (0,0) 位 置 
上 绘制 了 宽 250 像素 .高 250 像素 的 图 像 , 即 绘制 图 像 的 宽度 和 高 度 分 别 取 画布 的 宽度 和 
高 度 。 

(2) 对 原始 图 片 二 img 二 添加 onMouseMove 事件 ,并 指定 事件 处 理 函 数 为 enlarge()， 
将 当前 事件 对 象 event 作 参 数 。 当 鼠标 移动 到 原始 图 片区 域 时 ,会 自动 调用 enlarge()。 

(3) 在 enlarge() 方 法 中 使 用 变量 ev 保存 传人 的 参数 event, “ev 二 ev| | window. 
event; "这样 的 写法 是 为 了 考虑 浏览 器 兼容 性 问题 。 

然后 ,利用 event 对 象 的 offsetX 和 offsetY 属性 获取 当前 鼠标 位 置 ,并 设置 将 要 裁剪 
区 域 的 左上 角 坐 标 , 设 为 当前 鼠标 位 置 偏 左 偏 上 30 像素 的 位 置 。 

这 里 使 用 了 drawImage (img, sx, sy, swidth, sheight, x, y, width, height) 的 调用 
格式 。 

使 用 drawImage 方法 绘制 img 变量 所 指向 的 图 像 ,要 剪 取 的 区 域 左 上 角 坐 标 为 (x， 
y) , 剪 取 图 像 的 宽度 和 高 度 均 为 60 像素 ,绘制 区 域 左上 角 坐 标 为 画布 对 象 的 左上 角 ,绘制 
区 域 的 宽度 和 高 度 分 别 取 画 布 的 宽度 和 高 度 。 


3. 项 目 实施 


使 用 前 面 介绍 的 drawImage() 方 法 对 原始 图 像 进行 裁剪 和 绘制 。 
本 项 目 代 码 如 下 。 


<html> 
<head> 

<meta charset="utf- 8"> 

<script> 

Var Cc,ctx; 

Var img=new Image ()7 

window.onload= function(){ 
c= document .getElementById ("myCanvas")7 
ctx=c.getContext ("2d"); 
img.src="../images/baby.jpg"; 
ctx.drawImage (img, 0,0,c.width,c.height); 

function enlarge (ev) { 
Var ev=ev| |window.event; 
Var x=ev.offsetX- 30; 
Var y=ev.offsetY- 30; 
ctx.drawImage (img, x, y, 60, 60, 0,0,c.width,c.height); 
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</script> 
</head> 
<body> 
< img src="../images/baby.jpg" width= "450" height= "250" 
onMouseMove= "enlarge (event) "> 
<canvas id= "myCanvas" width= "250" height="250">< /canvas> 
< /body> 
</html> 


将 以 上 HTML 文件 保存 为 “放大 镜 . html”, 使 用 浏览 器 打开 ,将 鼠标 移动 到 左 侧 原 
始 图 片区 域 , 观 察 右 侧 画 布 区 域 , 对 原始 图 片 局 部 区 域 进行 放大 的 效果 。 


4. 知识 运用 


在 以 上 完成 的 放大 镜 页 面 的 基础 上 继续 添加 放大 镜 区 域 可 以 跟随 鼠标 来 回 移动 的 效 
果 , 如 图 10.12 所 示 。 





图 10.12 放大 镜 鼠 标 跟随 效果 


10.2.3 项 目 : 跳动 的 心 


1. 项 目 说 明 
使 用 HTML5 中 的 Canvas 对 象 ,完成 一 个 跳动 的 心 的 效果 页 面 , 如 图 10. 13 所 示 。 


2. 项 目 设计 
本 项 目 要 利用 Canvas 在 HTML 页 面 中 绘制 图 像 ,并 定 


时 进行 图 像 擦 除 和 重 绘 的 工作 。 

本 项 目 仍 然 使 用 10. 2. 1 节 介 绍 的 drawImage() 方 法 绘 
制图 像 ,并 使 用 BOM 对 象 中 的 window 对 象 的 setTimeout() 
方法 做 计时 器 ,每 隔 500ms 使 用 10. 1. 3 节 介绍 的 clearRect() 方 法 擦 除 现 有 图 像 , 并 使 用 
drawImage() 方 法 重新 绘制 男 一 个 不 同 大 小 的 图 像 。 

本 项 目 使 用 的 方法 见 表 10. 10。 


10.13 ”跳动 的 心 页 面 
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表 10.10 本 项 目 使 用 的 方法 





方法 名 描 述 
drawImage (img, x, y, width，| 在 画布 上 绘制 图 像 画布 或 视频 。 在 画布 的 (x,y) 位 置 上 绘制 宽度 
height) 为 width ,高 度 为 height 的 图 像 img 





LuRestCuy width heizhb，| 在 给 定 的 矩形 内 清除 指定 的 像素 ,x 和 y 代表 矩形 左上 角 的 x 坐标 ， 
人 width 和 height 代表 矩形 的 宽度 (以 像素 计 ) 


setTimeout(expression,time) | 延迟 指定 的 time( 以 毫秒 计 ) 后 ,执行 表达 式 expression 








(1) 在 HTML 页 面 主体 部 分 添加 canvas 元 素 , 并 添加 初始 化 JavaScript 函数 。 


<script> 
window.onload= function(){ 
c=document .getElementById ("myCanvas"); 
ctx=c.getContext ('2d'); 
image.src="../images/heart .png"; 
big(); 
3} 
</script> 
使 用 document. getElementById("myCanvas") 找 到 Canvas 对 象 ,调用 canvas. getContext 
("2d") 创 建 2D 绘图 环境 对 象 ,设置 image 对 象 的 src 属性 为 “.. /image/heart. png”, 指 
向 原始 图 片 文件 ,并 调用 bigO 〇 方法 。 
(2) 在 big() 方 法 中 先 使 用 clearRect0) 方 法 擦 除 绘制 小 图 的 区 域 ,再 利用 2D 绘图 环 
境 对 象 的 drawImage() 方 法 在 画布 中 绘制 大 图 像 。 
这 里 使 用 了 drawImage(img，x，y, width,height) 的 调用 格式 , 即 在 画布 (x,y) 的 位 
置 上 按照 指定 的 width 和 height 绘制 图 像 img, 因 此 ,在 画布 区 域 (50,50) 的 位 置 上 绘制 
了 宽 250 像素 、 高 250 像素 的 图 像 。 
然后 ,使 用 setTimeout() 方 法 计时 ,在 500ms 之 后 调用 small() 方 法 。 
(3) 在 small() 方 法 中 , 先 使 用 clearRect() 方 法 擦 除 绘 制 大 图 的 区 域 ,再 利用 2D 绘 
图 环境 对 象 的 drawImage() 方 法 在 画布 中 绘制 小 图 像 。 
这 里 仍然 使 用 drawImage(img，x, y,width,height) 的 调用 格式 , 即 在 画布 (x,y) 的 
位 置 上 按照 指定 的 width 和 height 绘制 图 像 img, 因 此 ,在 画布 区 域 (90,90) 的 位 置 上 绘 
制 了 宽 150 像素 、 高 150 像素 的 图 像 。 
然后 ,使 用 setTimeout() 方 法 计时 ,在 500ms 之 后 调用 big() 方 法 。 
这 样 ,就 实现 了 每 隔 500ms, 调 用 一 次 绘制 不 同 大 小 图 像 的 方法 , 擦 除 画 布 上 原 有 的 
图 像 ,实现 了 像 红 心 在 跳动 一 样 的 效果 。 


3. 项 目 实施 


使 用 drawImage() 方 法 进行 图 像 绘制 .使 用 setTimeout() 方 法 计时 ,在 指定 时 间 之 
后 ,使 用 clearRect() 方 法 擦 除 图 像 ,并 重新 绘制 男 一 个 大 小 不 同 的 图 像 。 
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本 项 目 代 码 如 下 。 


<html> 
<head> 
<meta charset= "utf- 8"> 
<script> 
Var crctx image=new Image () 7 
// 初 始 化 
window.onload= function(){ 
c=document.getElementBYId ("myCanvas")7 
ctx=c.getContext("2d7)7 
image.src="../images/heart .png"; 
big(); 
} 
function big(){ 
ctx.clearRect (90, 90, 150, 150); // 擦 除 小 图 
ctx.drawImage (image, 50, 50, 250, 250); 
setTimeout ("small ()", 500); 
3 
function small (){ 
ctx.clearRect (50, 50, 250, 250); // 擦 除 大 图 
ctx.drawImage (image, 90, 90, 150, 150); 
setTimeout ("big()",500); 
3 
</script> 
< /head> 
<body> 
<canvas id= "myCanvas" width="800px" height="700px" style="border:1px solid black" 
> 浏览 器 不 支持 < /canvas> 
< /body> 
</htm> 


将 以 上 HTML 文件 保存 为 “跳动 的 心 . html”, 使 用 浏览 器 打开 ,观察 画布 中 每 隔 
500ms 重新 绘制 心 形 图 像 的 效果 。 


4. 知识 运用 


在 以 上 实现 的 效果 的 基础 上 增加 大 、 中 、 小 3 种 心 形 图 像 的 绘制 效果 ,每 隔 500ms , 擦 
除 原 有 图 像 ,重新 绘制 另 一 种 大 小 的 图 像 。 


10.2.4 项 目 : 鼠标 画板 
1. 项目 说 明 
使 用 HTML5 中 的 Canvas 对 象 ,完成 一 个 鼠标 画板 页 面 , 当 鼠标 在 画布 区 域 上 移动 


萄 10 鲜 Canlas 画 和 而 


时 ,使 用 黑色 绘制 鼠标 移动 轨迹 , 当 单 击 鼠 标 左 键 时 ,停止 绘制 。 
2. 项 目 设计 


本 项 目 需 要 使 用 10. 1. 3 节 介 绍 的 arc() 方 法 绘制 圆 形 ,并 使 用 fill() 方 法 填充 圆 形 
以 fllStyle 属性 指定 的 颜色 进行 填充 。 

另外 ,对 Canvas 对 象 添加 onMouseMove 事件 和 onClick 事件 ,并 在 onMouseMove 
事件 的 事件 处 理 函 数 中 使 用 arc() 方 法 在 鼠标 当前 所 在 位 置 为 圆心 画 圆 ,这 样 , 当 鼠标 在 
画布 区 域 上 移动 时 ,就 会 在 画布 上 出 现 沿 鼠 标 移动 的 轨迹 线 。 在 onClick 事件 的 事件 处 
理 函 数 中 取消 onMouseMove 事件 操作 ,这样 就 会 在 单 击 鼠 标 左 键 时 ,停止 绘图 。 

本 项 目 使 用 的 方法 见 表 10. 11 。 


表 10.11 本 项 目 使 用 的 方法 
方 法 名 描 述 


创建 弧 / 曲 线 ( 用 于 创建 圆 形 或 部 分 圆 ),x 和 y 代表 圆心 的 x、y 坐标 ,r 
arc(xyyyr,SAngle,eAngle， | 代表 圆 的 半径 ,sAngle 和 eAngle 代表 起 始 角 和 结束 角 , 以 弧度 计 ( 弧 














counterclockwise) 的 圆 形 的 三 点 钟 位 置 是 0") ,counterclockwise 是 可 选 参数 ,代表 应 该 逆 
时 针 绘 图 ,还 是 顺 时 针 绘图 ,False 代表 顺 时 针 ,True 代表 道 时 针 

filO 填充 当前 绘图 (路 径 ) ,默认 颜色 是 黑色 

beginPath() 起 始 一 条 路 径 ,或 重 置 当 前 路 径 


(1) 在 HTML 页面 主体 部 分 添加 canvas 元 素 , 并 添加 初始 化 JavaScript 函数 。 


<script> 

window.onload= function (){ 
canvas= document .getElementById ("draw"); 
ctx= canvas .getContext ('2d"'); 

} 

</script> 

使 用 document. getElementById("draw") 找 到 Canvas 对 象 ,调用 canvas. getContext 
("2d") 创 建 2D 绘图 环境 对 象 。 

(2) 为 Canvas 对 象 指定 onMouseMove 事件 的 事件 处 理 函 数 为 draw() ,并 传递 事件 
对 象 event 作为 参数 ,指定 onClick 事件 的 事件 处 理 函 数 为 stop() .并 传递 当前 Canvas 对 
象 的 引用 this 作为 参数 。 

(3) 在 draw() 方 法 中 使 用 变量 ev 保存 传人 的 参数 event, “ev 二 ev|| window. 
event; "这样 的 写法 是 为 了 考虑 浏览 器 兼容 性 问题 。 

然后 ,利用 event 对 象 的 clientX 和 clientY 属性 获取 当前 鼠标 位 置 , 并 以 鼠标 当前 位 
置 坐标 为 参数 ,调用 画 圆 的 方法 drawArc() 。 

(4) 在 drawArc() 方 法 中 使 用 fillStyle 属性 指定 填充 颜色 为 黑色 ,使 用 arc() 方 法 ,以 
传人 的 鼠标 当前 的 位 置 作为 圆心 位 置 ,半径 为 15, 从 起 始 角度 0、 结 束 角 度 Math. PI * 2 
按 逆 时 针 方向 绘制 弧 形 , 即 绘制 一 个 圆 形 。 





HiMLS+cS§S3+J8vaseript 而 由 用 眉 


(5) 在 stop() 方 法 中 使 用 传人 的 参数 得 到 Canvas 对 象 , 并 将 其 onMouseMove 事件 
处 理 操作 设置 为 空 , 即 停止 了 绘制 操作 。 


3. 项 目 实施 


使 用 arc() 方 法 进行 圆 形 的 绘制 ,并 使 用 fill() 方 法 填充 圆 形 ,默认 使 用 黑色 填充 。 在 
onMouseMove 事件 处 理 函数 中 ,以 鼠标 所 在 位 置 为 圆心 绘制 圆 形 , 当 鼠标 移动 时 ,就 会 出 
现 沿 鼠 标 移动 轨迹 的 线 。 

本 项 目 代 码 如 下 。 


<htm> 
<head> 
<meta charset="UTF- 8"> 
<title> 鼠 标 画 < /title> 
<Script type= "text/javascript"> 
Var canvas,ctx; 
window.onload= function(){ 
canvas= document .getElementById('draw'); 
ctx= canvas.getContext ('2d'); 
} 
// 夯 
function drawArc (x,y) { 
ctx.fillSstyle= "black"; 
ctx.beginPath (); 
ctx.arc (x,y,15,0,Math.PI* 2,true); 
ctx.closePath () 7 
ctx.fill (); 
和 
function draw (ev) { 
ev=ev| | window.event; 
drawArc (ev.clientX,ev.clientYy); 
} 
// 鼠 标 单 击 停止 
function stop(c){ 
c.onMouseMove= function () {} 
} 
</script> 
</head> 
<body> 
<canvas id= "draw" width= "800" height= "600" onMouseMove= "draw (event)" onClick= "stop 
(this)">< /canvas> 
< /body> 
< /html> 


将 以 上 HTML 文件 保存 为 “鼠标 画板 . html”, 使 用 浏览 器 打开 ,在 页 面 上 移动 鼠标 ， 
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观察 页 面 上 的 根据 鼠标 的 移动 轨迹 绘制 出 的 黑色 线条 。 
4. 知识 运用 


在 以 上 实现 的 效果 的 基础 上 增加 选择 画笔 颜色 功能 ,在 右 侧 调 色 板 区 域 用 鼠标 单 击 
颜色 即 可 选择 画笔 颜色 ,如 图 10. 14 所 示 。 另 外 ,增加 双击 开始 绘画 , 单 击 停止 绘画 的 
功能 。 











图 10.14 改进 的 鼠标 画板 


103 咖啡 商城 一 一 商品 详情 模块 实现 


本 项 目 要 实现 的 功能 属于 综合 项 目 中 的 商品 详情 页 面 中 的 商品 图 片 展 示 功 能 。 本 项 
目 要 利用 本 章 学 习 的 HTML5 canvas 元 素 实 现 综合 项 目 中 * 商 品 详情 ”页面 的 商品 图 片 
切换 和 放大 效果 。 

(1) 商品 详情 图 片 切换 功能 : 这 个 功能 可 以 使 用 HTML5 中 新 引入 的 canvas 元 素 ， 
利用 canvas 绘图 对 象 的 方法 对 选中 的 缩 略图 进行 放大 和 重 绘 。 

(2) 商品 图 片 放大 镜 功 能 : 这 个 功能 可 以 使 用 canvas 元 素 的 绘图 对 象 的 绘制 图 像 方 
法 ,对 鼠标 所 在 位 置 的 矩形 区 域 进行 裁剪 和 重 绘 。 


10.3.1 项 目 说 明 


使 用 浏览 器 打开 “商品 详情 . html” 页 面 ,分 别 移动 到 不 同 的 商品 缩 略 图 上 ,查看 商品 
大 图 展示 区 的 商品 高 清 大 图 随 之 切换 的 效果 。 当 鼠标 在 商品 大 图 上 移动 时 ,会 出 现 放 大 
镜 效果 ,鼠标 所 在 位 置 的 矩形 区 域 被 放大 2 售后 显示 。 效 果 如 图 10. 15 所 示 。 

在 本 项 目 中 ,主要 需要 完成 以 下 几 个 功能 。 

(1) 商品 详情 图 片 切换 功能 : 在 商品 图 片 显示 区 域 , 提 供 若 干 张 缩 略 小 图 ,鼠标 停 在 
哪 张 缩 略 图 上 方 , 就 在 商品 大 图 显示 区 显示 该 张 缩 略图 的 高 清 大 图 。 

(2) 商品 图 片 放 大 镜 功能 : 对 商品 大 图 实现 放大 镜 功能 。 


10.3.2 项 目 设计 


在 本 项 目 中 需要 完成 的 功能 的 设计 思路 如 下 。 
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图 10.15 商品 详情 页 面 的 商品 图 片 切 换 和 放大 镜 效 果 





1. 初始 化 需要 用 的 全局 变量 ,编写 初始 化 函数 


声明 用 于 保存 Canvas 绘图 对 象 ,img 元素 对 象 和 Canvas 对 象 的 全 局 变量 。 在 初始 
化 函数 中 ,分 别 初 始 化 以 上 全 局 变量 ,并 获取 要 显示 的 第 一 张 图 片 ,使 用 绘图 对 象 的 


drawImage() 方 法 将 第 一 张 图 片 绘制 在 canvas 标记 的 区 域 。 
2. 实现 商品 详情 图 片 切换 功能 


在 商品 图 片 缩 略图 位 置 添加 onMouseOver 事件 处 理 函 数 changePic()。 在 该 函数 
中 ,首先 擦 除 canvas 标记 的 区 域 中 的 原 图 片 ,然后 获取 当前 鼠标 所 选取 的 缩 略 图 ,使 用 绘 


图 对 象 的 drawImage() 方 法 将 其 重新 放大 ,并 绘制 在 canvas 区 域 中 。 
3. 实现 商品 图 片 放大 镜 功 能 


对 商品 图 片 大 图 区 添加 onMouseMove 事件 处 理 函 数 canvasl_onMouse_move() ,在 
该 函数 中 获取 当前 要 显示 的 图 片 ,并 获取 当前 鼠标 所 在 位 置 的 坐标 ,根据 鼠标 当前 坐标 位 
置 计 算出 要 绘制 的 区 域 坐标 ,使 用 绘图 对 象 的 drawImage() 方 法 将 放大 2 倍 的 图 像 绘制 


在 Canvas 区 域 中 。 
10.3.3 项 目 实施 
1. 初始 化 需要 用 的 全 局 变量 ,编写 初始 化 函数 
/* 声 明 全 局 变量 * / 
var gwidth= 360; // 商 品 大 图 的 图 片 宽度 
var gheight=360; // 商 品 大 图 的 图 片 高 度 


Var ctx; 


Var img; 
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var canvasl, canvas2; // 原 图 像 使 用 的 canvas 元 素 与 放大 镜 中 图 像 使 用 的 canvas 元 素 


window.onload= function() { 


} 


canvasl= document .getElementById ("canvas1");// 获 取 原 图 像 使 用 的 canvas 元素 

canvas2= document .getElementById("canvas2"); ”// 获 取 放 大 镜 中 图 像 使 用 的 canvas 元 素 
canvasl .onMouseMove= canvasl onMouse move; // 添 加 原 图 像 获取 鼠标 焦点 时 的 处 理 函 数 
canvasl.onMouseOut= canvasl_onMouse _out;// 添 加 原 图 像 失去 鼠标 焦点 时 的 处 理 函 数 

Ctx= canvasl .getContext ("2d"); 

Var image= document .getElementById ("first img"); 

ctx.drawImage (image, 0,0); // 绘 制 初始 时 显示 的 商品 大 图 


2. 实现 商品 详情 图 片 切 换 功能 


// 切 换 商 品 图 片 
function changePic (1i){ 


} 


ctx.clearRect (0, 0, gwidth, gheight); // 擦 除 canvasl 中 的 原 图 像 
Var el=1i.childNodes; 
img=el[0] .childNodes; 
ctx.drawImage (img [0] ,0,0,gwidth, gheight); 
// 重 新 在 canvasl 元 素 中 绘制 所 选 缩 略 图 对 应 的 大 图 


3. 实现 商品 图 片 放 大 镜 功 能 
// 鼠 标 在 商品 大 图 上 移动 时 的 事件 处 理 函数 


function canvasl_onMouse move (ev){ 


Var x,y? // 鼠 标 在 canvas 元 素 中 的 相对 坐标 点 

var drawWidth, drawHeight; // 鼠 标 所 指 区 域 的 宽度 与 高 度 

Var context= canvas2.getContext ('2d°'); 

// 获 取 放 大 镜 中 图 像 使 用 的 canvas 元素 的 绘图 对 象 

canvas2.style.display= "inline"; // 显 示 放 大 镜 

context .clearRect (0, 0,canvas2.width, canvas2.height); 

// 擦 除 放大 镜 区 域 对 应 的 canvas2 原 图 像 

X=eV.pageX- canvasl1 .offsetLeft+ 2; 

// 鼠 标 在 canvas 元 素 中 X 轴 上 的 相对 坐标 点 +2,+2 是 为 了 避免 鼠标 移动 到 放大 镜 上 
Y=ev.pageY- canvas1.offsetTop+27 

// 鼠 标 在 canvas 元 素 中 站 轴 上 的 相对 坐标 点 +2,+2 是 为 了 避免 鼠标 移动 到 放大 镜 上 


canvas2.style.left= (ev.pageX+ 2)+ "px"; // 设 置 放大 镜 在 原 图 上 的 X 轴 上 的 坐标 点 
canvas2.style.top= (ev.pageY+ 2)+ "px"; // 设 置 放大 镜 在 原 图 上 的 Y 轴 上 的 坐标 点 
// 获 取 当 前 需要 被 放大 的 图 像 


Var image=new Image ()7 
if (img==nul1) 

image.src= "image/taobao/detail/1.jpg"; 
else 

image.src= img[0] .src; 


// 获 取 鼠 标 所 指 区 域 的 宽度 
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if (x+ 40> canvas1 .width) // 如 果 鼠 标 所 指 区 域 的 宽度 超出 原 图 宽度 
drawWidth= canvas] .width— x; // 设 置 鼠标 所 指 区 域 宽度 为 原 图 中 的 剩余 宽度 
else 
drawWidth= 200; // 设 置 鼠 标 所 指 区 域 的 宽度 为 40 像素 
// 获 取 鼠 标 所 指 区 域 的 高 度 
if (y+ 200> canvasl.height) // 如 果 鼠 标 所 指 区 域 的 高 度 超出 原 图 高 度 
drawHeight=canvasl.height-y;  // 设 置 鼠标 所 指 区 域 高 度 为 原 图 中 的 剩余 高 度 
else 
drawHeight=200; // 设 置 鼠标 所 指 区 域 的 高 度 为 40 像 素 


// 在 放大 镜 对 应 的 canvas2 区 域 绘制 放大 2 倍 后 的 图 像 
jimage.onload= function (){ 
context.drawImage (image, x,y, drawWidth, drawHeight, 0, 0, drawWidth * 2,drawHeight 关 
2); 
3. 
} 
// 鼠 标 移出 商品 大 图 时 的 事件 处 理 函 数 
function canvasl onMouse out (){ 
// 重 置 canvas2 元 素 的 位 置 
Canvas2.style.left= "0px"; 
canvas2.style.top= "0px"; 
// 隐 藏 放大 镜 对 应 的 canvas2 


canvas2.style.display= "none"7 


习 题 
一 、 选 择 题 
1. HTML5 中 的 canvas 元 素 用 于 ( )。 
A. 显示 数据 库 记 录 B. 操作 MySQL 中 的 数据 
C. 绘制 图 形 D. 创建 可 拖 动 的 元 素 
2. HTML5 内 建 对 象 ( ) 用 于 在 画布 上 绘制 。 
A. getContent B. getContext 
C. getGraphics D. getCanvas 
时 ) 不 是 Canvas 的 方法 。 
A. getContext() B. fill() 
C. stroke() D. controller() 


4. 以 下 关于 Canvas 的 说 法 正确 的 是 ( ys 
A. clearRect(width，height,left，top) 清 除 宽 为 width、 高 为 height, 左 上 角 顶 点 
在 (left,top) 点 的 矩形 区 域内 的 所 有 内 容 
B. drawImage() 方 法 有 4 种 原型 
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C. fillText() 的 第 3 个 参数 maxWidth 为 可 选 参数 
D. fillText() 方 法 能 够 在 画布 中 绘制 字符 串 
5. 以 下 关于 Canvas 的 说 法 正确 的 是 ( ju 
A. HTML5 标准 中 加 入 了 WebSql 的 API 
B. HTML5 支持 IE8 以 上 的 版 本 (包括 IE8) 
C. HTML5 仍 处 于 完善 中 
D. HTML5 将 取代 Flash 在 移动 设备 中 的 地 位 
6. 使 用 属性 ( ) 设 置 填充 绘画 的 颜色 、 渐 变 或 模式 。 


A. strokeStyle B. fillStyle C. shadowColor D. shadowBlur 
7. 使 用 方法 ( ) 绘 制 填充 矩形 。 
A. rect() B. strokeRect() C. fillRectO) D. clearRect() 
8. 使 用 方法 ( ) 逆 时 针 绘 制 圆心 在 (20,20) ,半径 为 10px 的 从 0" 起 始 到 270" 终 目 
的 一 条 弧 线 。 


A. arc(20,20,10,0, 2 * Math. PI,true) 
B. arc(20,20,10,0,1.5* Math. PI，true) 
arc(20,20,10, Math. PI，1. 5 * Math. PI,false) 
.arc(10,20,20,0,1.5* Math. PI,true) 
9. 使 用 方法 ( ) 在 画布 (10,10) 的 位 置 上 按 宽 50px、 高 50px 绘制 图 像 img。 
A. drawlmage(img,10,10,50,50) 
B. drawImage(img,50,50,10,10) 
C. createlmageData(50,50) 
D. createImageData(10,10,50,50) 
10. 代码 段 ( ””) 在 画布 (10,10) 到 (30,30) 的 位 置 绘制 一 条 黑色 直线 。 


A. context. moveTo(10,10); 


导 痪 


context. lineTo(30.,30); 
context. strokeStyle='# FFFFFF'; 
context. stroke(); 

B. context. moveTo(10,10); 

context. lineTo(30,30); 

context. lineTo(30,30); 

context. strokeStyle="'# 000000'; 


le 


context. stroke(); 

D. context. moveTo(10,10); 
context. lineTo(30,30); 
context. strokeStyle 一 ' 井 000000'9 


context. stroke(); 


二 、 综 合 题 
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1. 使 用 HTML5 中 的 canvas 元 素 在 页 面 上 绘制 如 图 10. 16 
所 示 的 效果 。 
2. 使 用 HTML5 中 的 canvas 元 素 及 其 方法 实现 页 面 上 图 
片 的 缩放 效果 , 拖 动 页 面 底 端 滑 块 控件 ,缩放 显示 图 片 ,实现 如 
图 10. 17 所 示 的 效果 。 
3. 使 用 HTML5 中 的 canvas 元 素 及 其 方法 实现 综合 项 目 
的 商品 详情 页 面 的 商品 大 图 和 缩 略 小 图 部 分 的 显示 。 商 品 详情 
页 面 的 商品 大 图 和 缩 略 小 图 区 域 的 显示 效果 如 图 10. 18 所 示 。 图 10.16 页 面 示例 





图 10.18 商品 详情 页 面 


| 228 














本 章 概 述 

通过 本 章 的 学 习 , 学 生 能 够 了 解 HTML5 新 增 的 与 本 地 存储 相关 的 知识 ,主要 包括 
Web Storage 和 本 地 数据 库 。 通 过 编写 Web Storage 和 本 地 数据 库 的 实际 案例 ,学 生 能 
够 掌握 使 用 HTML5 的 新 特性 一 本 地 存储 的 方法 ,体会 Web_ Sierage 存储 机 担 以 及 其 
对 HTML4 中 的 cookies 存储 机 制 的 改进 ,掌握 在 客户 端 本 5 
用 本 地 数据 库 的 好 处 。 

学 习 重点 与 难点 

重点 : 

(1) Web Storage 存储 机 制 。 

(2) 本 地 数据 库 的 创建 和 使 用 。 

难点 : 

(1) sessionStorage 和 localStorage 的 使 用 和 区 别 。 

(2) 创建 数据 库 , 对 本 地 数据 库 的 增 、 删 、 改 、 查 操作 以 及 事务 处 理 。 

重点 及 难点 学 习 指导 建议 : 

。 先 对 比 两 种 本 地 存储 方式 ,体会 它们 的 区 别 。 

。 通过 项 目 案例 理解 和 记忆 Web Storage 的 常用 方法 的 使 用 。 
对 比 本 地 数据 库存 储 与 使 用 Web Storage 存储 的 区 别 。 
通过 编写 一 个 本 地 数据 库 访问 程序 实例 记忆 基本 步骤 和 使 用 到 的 方法 。 
。 在 此 基础 上 ,独立 完成 每 个 章节 中 的 知识 运用 部 分 ,体会 使 用 到 的 知识 点 的 具体 

作用 。 
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11.1 Web Storage 


在 HTML5 中 ,除了 引入 canvas 绘图 元 素 之 外 , 另 一 个 新 增 的 重要 特性 就 是 本 地 存 
储 。HTML5 利用 Web Storage 可 以 实现 在 客户 端 本 地 保存 数据 的 功能 。Web Storage 
是 对 HTML4 中 的 cookies 存储 机 制 的 一 个 改进 和 完善 ,由 于 cookies 本 身 存 在 的 很 多 缺 
点 ,如 数据 大 小 受 限 、 浪 费 带宽 以 及 其 操作 的 复杂 性 和 安全 性 等 问题 ,在 HTML5 中 将 使 
用 Web Storage 存储 机 制 代 替 cookies。 目 前 ,Safari5 十 ,Chrome、Firefox、Opera 以 及 
Internet Explorer 8 十 都 已 支持 Web Storage。 


11.1.1 Web Storage 的 常用 属性 和 方法 


Web Storage 是 HTML5 引入 的 一 个 非常 重要 的 新 特性 ,实现 了 在 客户 端 本 地 存储 
数据 的 功能 。 它 与 HTML4 的 cookies 类 似 ,但 功能 上 比 cookies 要 强大 得 多 。 例 如 ， 
cookies 的 大 小 一 般 被 限制 为 4KB, 而 Web Storage 官方 建议 是 5MB。 

Web Storage 可 以 分 为 sessionStorage 和 localStorage 两 种 。 


1. sessionStorage 


sessionStorage 将 数据 保存 在 session 对 象 中 ,session 对 象 通常 在 客户 端 浏览 器 连接 
到 服务 器 时 建立 ,在 浏览 器 关闭 时 销毁 。sessionStorage 中 保存 的 数据 在 客户 端 浏览 器 
连接 到 服务 器 端 后 一 直到 断 开 连接 前 ,都 可 以 访问 。 当 会 话 结束 后 ,数据 会 自动 清除 。 


2. localStorage 


localStorage 一 直 将 数据 保存 在 客户 端 本 地 的 硬件 设备 ,如 硬盘 等 ,即使 浏览 器 关闭 ， 
localStorage 中 的 数据 仍然 存在 ,当下 一 次 客户 端 浏览 器 再 次 访问 服务 器 时 ,其 中 的 数据 
仍然 可 以 继续 访问 。 

因此 ,sessionStorage 和 localStorage 的 区 别 在 于 ,sessionStorage 是 临时 保存 数据 的 
对 象 ,而 localStorage 可 以 永久 保存 数据 。 

创建 和 访问 localStorage, 例 如 : 


<script type= "text/javascript"> 
localStorage.lastname= "Smith"; 
document .write (localStorage.lastname); 


</script> 
保存 数据 的 写法 : 


localSstorage.setItem ("username", "smith"); 


localSstorage.username= "smith"; 
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读 取 数 据 的 写法 
var un= localStorage.getItem("username")7 
或 
Var un= localStorage.username; 
删除 数据 的 写法 
localStorage .removeItem("c")7 
无 论 是 sessionStorage, 还 是 localStorage, 常 用 的 API 都 相同 , 见 表 11. 1。 
表 11.1 Web Storage 的 常用 属性 和 方法 
属性 名 /方法 名 描 ” 述 
常用 属性 | length 所 有 保存 在 Web Storage 中 的 数据 的 个 数 
setltem(key,value) | 保存 数据 ,保存 数据 时 使 用 “ 键 / 值 (key/value) "对 的 格式 保存 , 键 
和 值 都 为 字符 串 类 型 。 不 允许 保存 重复 键 名 
getltem(key) 读 取 数据 , 读 取 键 名 为 key 的 数据 的 值 
常用 方法 | removeltemCkey) | 删除 数据 ,删除 键 名 为 key 的 数据 
clear() 清空 数据 
key(index) 获取 索引 值 为 index 的 键 名 key,index 从 0 开始 








11.1.2 项 目 : 简易 购物 车 
1. 项 目 说 明 


编写 简易 的 购物 车 HTML 页 面 ,使 用 HTML5 提供 的 新 特性 一 一 Web Sto 
在 客户 端 本 地 保存 购物 车 数据 的 功能 。 存 储 的 数据 内 容 主 要 包括 图 书 名 称 、 图 于 
书 封面 .图 片 地 址 等 。 





rage 实现 
BB 价格、 图 


可 以 在 购物 车 页 面 上 单 击 “ 添 加 到 购物 车 ”按钮 .将 图 书 添加 到 购物 车 。 单 击 “ 去 购物 
车 ”按钮 ,打开 查看 购物 车 详情 的 页 面 。 也 可 以 单 击 “ 清 空 购物 车 ”按钮 ,将 购物 车 清空 。 


购物 车 页 面 如 图 11. 1 所 示 。 

另外 ,在 购物 车 页 面 可 以 查看 当前 购物 车 内 的 信息 ,包括 图 书 封 面 、 图 书 名 、 
以 及 “删除 ”按钮 。 单 击 “ 删 除 ”按钮 ,可 以 将 该 本 图 书 从 购物 车 中 删除 。 查 看 购 
如 图 11.2 所 示 。 
2. 项 目 设计 


于 一 个 购物 车 仅 属于 当前 的 一 个 客户 端 用 户 , 其 中 的 信息 不 需要 通过 网 




















图 书 价格 
物 车 页 面 


络 访问 服 


务 端 程序 获取 ,因此 购物 车 信息 最 适合 于 存储 在 客户 端 本 地 。 本 项 目 就 是 需要 利用 


HTML5 中 新 引入 的 本 地 存储 技术 实现 一 个 简单 的 购物 车 功能 。 
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HTML 
|html5 入 门 数据 库 原理 与 应 用 
lw 扶 0 扶 
[添加 到 购 攀 车 | | 去 购物 车 | 添加 到 购物 车 | | 去 购物 车 
青空 购物 车 








11.1 购物 车 页 面 





使 用 localStorage 的 保存 数据 的 方法 ,将 购物 车 
现 有 信息 存 人 localStorage 中 。 使 用 localStorage 的 HTML 
读 取 数据 的 方法 , 读 取 本 地 保存 的 数据 ,并 显示 到 页 日 Hm 5 和 A izo | 上 
面 上 。 


1) 购物 车 页 面 | 
在 购物 车 页 面 中 放置 “添加 到 购物 车 ”去 购物 | 除 据 库 原理 与 应 用 |0 | 邮 瞪 | 


车 ”和 “清空 购物 车 ”按钮 。 设 置 “添加 到 购物 车 ”按钮 
的 单 击 事件 处 理 函 数 为 addCart() ;设置 “去 购物 车 ” 图 11.2 查看 购物 车 页 面 
按钮 的 单 击 事件 处 理 代码 为 window. open() , 单 击 该 
按钮 后 打开 “查看 购物 车 . html” 页 面 ;设置 清空 购物 车 ”按钮 的 单 击 事 件 处 理 函 数 为 
clearCart() 。 

(1) addCart() 方 法 。 

addCart() 用 于 将 图 书 添加 到 购物 车 ,其 参数 是 所 单 击 的 按钮 对 象 ,首先 通过 bt. 
form. bookname. value 可 以 获取 该 按钮 对 象 所 在 表单 中 的 名 为 bookname 元 素 的 值 , 即 
图 书 名 称 。 使 用 同样 的 方式 获取 图 书 的 价格 、 图 书 封面 图 片 地 址 。 

接 下 来 ,为 了 将 图 书 的 所 有 信息 保存 到 一 个 对 象 中 ,可 使 用 new Object 语句 创建 一 
个 对 象 , 将 图 书 价格 和 图 书 封面 图 片 地 址 保存 在 该 对 象 的 各 个 属性 中 。 为 了 把 该 对 象 转 
换 成 JSON 格式 的 文本 数据 ,可 使 用 JSON 对 象 的 stringify() 方 法 。 该 方法 的 调用 格式 
如 下 。 











图 书 封面 | 市 名 单价 曲 作 | 






























































Var str=JSON.stringify (data); 


其 中 ,参数 data 表示 要 转换 成 JSON 文本 数据 的 对 象 。 该 方法 会 将 对 象 data 转换 成 
JSON 格式 的 文本 数据 并 返回 。 

最 后 ,调用 localStorage 的 setItem() 方 法 将 图 书信 息 保存 到 localStorage 中 ,使 用 图 
书 名 作为 键 名 ,将 保存 了 图 书 价格 和 图 书 封面 图 片 地 址 的 对 象 data 转换 后 的 JSON 文本 
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数据 作为 键 值 。 

(2) clearCar() 方 法 。 

clearCart() 用 于 清空 购物 车 内 容 。 直 接 调用 localStorage 的 clear() 方 法 即 可 清除 
localStorage 中 保存 的 所 有 信息 。 

2) 查看 购物 车 页 面 

在 查看 购物 车 页 面 中 ,页 面 加 载 事件 onLoad 的 处 理 中 ,调用 loadAll() 方 法 ,显示 保 
存在 localStorage 中 的 所 有 信息 ,并 在 页 面 中 的 每 个 图 书后 面 放置 “删除 ? 超 链 接 , 设 置 其 
单 击 事件 处 理 函 数 为 delCart() 。 

(1) loadAll() 方 法 。 

loadAll() 用 于 显示 保存 在 localStorage 中 的 所 有 图 书信 息 。 使 用 localStorage 的 
length 属性 判断 其 是 否 为 空 , 若 不 为 空 , 则 在 result 变量 中 生成 用 于 显示 图 书信 息 的 表格 
HTML 代码 。 循 环 取出 localStorage 中 保存 的 每 一 项 数据 ,利用 localStorage 的 key() 方 
法 取出 当前 数据 的 键 名 ,再 使 用 localStorage 的 getItem() 方 法 取出 该 键 名 对 应 的 数据 的 
键 值 。 由 于 取出 的 键 值 是 JSON 文本 格式 的 数据 ,因此 需要 再 将 其 解析 为 JSON 对 象 ,这 
个 过 程 使 用 了 JSON 对 象 的 parse() 方 法 。 该 方法 的 调用 格式 如 下 。 

















Var data= JSON.parse (str); 


其 中 ,参数 str 表示 要 解析 为 JSON 对 象 的 文本 数据 。 该 方法 会 将 传人 的 文本 数据 
转换 为 JSON 对 象 并 返回 。 

得 到 JSON 对 象 后 ,可 以 取出 其 中 保存 的 图 书 价格 (data. price) 和 图 书 封面 图 片 地 址 
(data. pic) ,分 别 在 表格 的 单元 格 中 显示 。 

最 后 ,使 用 list. innerHTML 属性 将 result 中 的 HTML 代码 放 入 id 为 list 的 元 素 
体 中 。 

(2) delCart() 方 法 。 

delCart() 用 于 从 购物 车 中 删除 指定 图 书 ,其 参数 是 所 要 删除 图 书 的 图 书 名 称 。 直 接 
调用 localStorage 的 removeltem() 方 法 ,可 以 把 指定 键 名 的 数据 从 localStorage 中 删除 。 

最 后 ,调用 loadAll() 方 法 重新 显示 购物 车 中 的 现 有 内 容 。 


3. 项 目 实施 
(1) 本 项 目的 购物 车 页 面 代码 如 下 。 


<html> 
<head> 

<title> 购 物 车 < /title> 

<meta charset= "utf- 8"> 

<style> 
div.above{width:300px;float:left;margin- bottom:20px;} 
div.bottom{clear:left;} 

</style> 


<script> 
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function addCart (bt) { 
Var bookname=bt .form.bookname .value; 
Var price=bt .form.price.value; 
Var pic=bt .form.imgsrc.value; 
Var data= new Object; 
data.price=price; 
data.pic=pic; 
Var str=JSON.stringify (data); 
localStorage.setItem (bookname, str); 
alert ("添加 成 功 "); 
} 
function clearCart (bt) { 
localSstorage.clear (); 
alert ("购物 车 已 清空 "); 
} 
</script> 
< /head> 
<body> 
<div class="above"> 
< form> 
<img src="../images/s.jpg" width="150" height= "200"/> 
< input type= "hidden" name= "imgsrc" value="../images/s.jpg"> 
<p>< input type= "text" name= "bookname" value= "html5 入 门 " readonly>< /p> 
<p>< input type= "text" name= "price" value="120"> 元 </p> 
<input type= "button" value= "添加 到 购物 车 " onclick="addcart (this)"> 
<input type= "button" value= "去 购物 车 " onClick= "open(' 查 看 购物 车 .html'， 
'mywin', "width= 400 height= 300°');"> 
< /form> 
</div> 
<div class= "above"> 
< form> 
<img src="../images/db.jpg" width="150" height= "200"/> 
< input type= "hidden" name= "imgsrc" value="../images/db.jpg"> 
<p>< input type= "text" name= "bookname" value= "数据 库 原理 与 应 用 " readonly> 
</p> 
<p>< input type= "text" name= "price" value= "80"> 元 < /p> 
< input type= "button" value= "添加 到 购物 车 " onclick="addcart (this)"> 
<input type= "button" value=" 去 购物 车 " onClick= "open ("查看 购物 车 .html'， 
'mywin', 'width= 400 height= 300');"> 
< /form> 
</div> 
<div class= "bottom">< input type= "button" value= "清空 购物 车 " 
onClick="clearCart ()"></div> 
< /body> 
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</html> 


将 以 上 HTML 文件 保存 为 “购物 车 . html”, 使 用 浏览 器 打开 , 单 击 图 书信 息 下 方 的 
“添加 到 购物 车 ”按钮 ,观察 弹出 的 对 话 框 的 提示 信息 是 否 是 “添加 成 功 "。 单 击 “ 去 购物 
车 ?按钮 ,观察 打开 的 新 窗口 中 的 购物 车 信息 显示 情况 。 单 击 * 清 空 购物 车 ”按钮 ,再 单 击 
“去 购物 车 ”按钮 ,观察 打开 的 新 窗口 中 的 购物 车 内 容 是 否 已 经 清空 ,提示 “目前 购物 车 为 
空 , 快 去 购物 吧 ”。 

(2) 本 项 目的 查看 购物 车 页 面 代码 如 下 。 


<html> 
<head> 
<title> 查 看 购物 车 < /title> 
<meta charset="utf- 8"> 
<script> 





window.onload= function(){ 
loadAll (); 


function loadAll (){ 
Var list= document .getElementById ("list"); 
if(localstorage.length> 0){ 
Var result= "< table border= "1'>"; 
result+="<tr><td> 图 书 封面 </td><td> 书 名 < /td><td> 单 价 < /td><td> 
操作 < /ta>< /tr>"; 
for (var i=0;i<localStorage.length;i++){ 
Var bookname= localStorage.key (i); 
Var str= localStorage.getItem (bookname); 
var data= JSON .parse (str); 
result+="<tr><td>< img src= '"+data.pic+"' width= '80"' 
height= '80'>< /td><td> "+bookname+ "< /td><td> "+ data.price+ "</td> 
<td> < a href= \"javaScript:delCart ('"+bookname+"')\" onClick=\" 
return confirm(' 确 定 要 删除 吗 ?')\"> 删 除 < /a>< /td> 
</tr>"; 
} 
result+="< /table> "7 
list.innerHTMI= result; 
}else{ 


list.innerHTML=- "目前 购物 车 为 空 , 快 去 购物 吧 "7 


} 
function delCart (bn) { 
localstorage.removeItem (bn); 
loagdAll (); 
</script> 
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</head> 
<body> 
<div id="list">< /div> 
< /body> 
</html> 
将 以 上 HTML 文件 保存 为 “查看 购物 车 . html”, 使 用 浏览 器 打开 ,观察 购物 车 中 现 
有 图 书信 息 的 内 容 。 单 击 每 本 图 书信 息 后 方 的 “删除 ” 超 链接 ,观察 弹出 的 对 话 框 的 提示 
信息 “确定 要 删除 吗 ?”, 继 续 单 击 “ 确 定 ” 按 钮 ,观察 该 本 图 书信 息 是 否 已 经 从 购物 车 中 
删除 。 


4. 知识 运用 


利用 localStorage 完成 一 个 简易 的 手机 通讯 录 , 可 以 在 HTML 页 面 中 输入 姓名 、 手 
机 号 信息 , 单 击 “ 保 存 ” 按 钮 ,将 信息 存 和 人 localStorage, 如 图 11. 3 所 示 。 




















畏 入 姓名， 





图 11.3 保存 通讯 录 信息 


输入 姓名 信息 , 单 击 “ 查 找 ” 按 钮 ,显示 localStorage 中 该 姓名 对 应 的 手机 号 信息 ,如 
图 11.4 所 示 。 
若 输 入 的 姓名 不 存在 , 则 提示 “对 不 起 ,不 存在 您 要 查找 的 用 户 ”, 如 图 11.5 所 示 。 

















姓名 ， 胀 三 姓名 胀 三 
手机 ， |13345678901 手机 : |13345678901 | 
强 保存 | 
输入 姓名 区 三 | 区 输入 姓名 ， 攻 ] 匿 划 
张 三 的 手机 号 码 是 ，13345678901 对 不 起 ， 不 存在 您 要 查找 的 用 户 
图 11.4 查找 通讯 录 信 息 图 11.5 查找 信息 不 存在 
112 本 地 数据 库 


虽然 HTML5 提供 了 功能 强大 的 sessionStorage 和 localStorage 实现 本 地 存储 ,但 这 
两 个 对 象 均 适 合 存储 简单 数据 结构 的 数据 ,对 于 复杂 的 Web 应 用 的 数据 结构 ,就 不 适用 
了 。 因 此 ,HTML5 又 提供 了 浏览 器 端的 本 地 数据 库 支 持 , 人 允许 直 接 通过 JavaScript 在 客 
户 端 浏览 器 创建 一 个 本 地 数据 库 , 并 且 支 持 标准 SQL 的 增删 、 改 . 查 操 作 , 让 离线 Web 
应 用 能 够 更 加 方便 地 存储 结构 化 数据 ,大 大 丰富 了 客户 端 本 地 可 以 存储 的 数据 内 容 , 使 得 
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原本 必须 保存 在 服务 器 端的 数据 转 为 保存 在 客户 端 本 地 ,从 而 大 大 提高 了 Web 应 用 的 性 
能 ,减轻 了 服务 器 端的 负担 。 


11.2.1 本 地 数据 库 访问 


HTML5 内 置 了 一 个 SQLite 数据 库 作 为 本 地 数据 库 , 可 以 通过 标准 SQL 访问 。 操 
作 本 地 数据 库 的 最 基本 的 步骤 如 下 。 

(1) openDatabase 方 法 : 创建 一 个 访问 数据 库 的 对 象 。 

(2) 使 用 步骤 (1) 创 建 的 数据 库 访问 对 象 执行 transaction 方法 ,通过 此 方法 可 以 执行 
事务 处 理 ,在 该 方法 的 回调 函数 中 可 以 执行 SQL 命令 。 

(3) 通过 executeSql 方法 执行 SQL 命令 ,通常 包括 增 删改. 查 4 种 操作 。 

下 面 分 别 介绍 这 些 常 用 方法 的 使 用 。 


1. 创建 访问 数据 库 的 对 象 

首先 ,必须 使 用 openDatabase 方法 创建 一 个 访问 数据 库 的 对 象 ,例如 : 

var db= openDatabase ("mydb", "1.0", "My first DB", 2* 1024* 1024); 

该 方法 的 4 个 参数 的 含义 分 别 是 : 第 一 个 参数 代表 创建 的 数据 库 名 ,第 二 个 参数 代 
表 数 据 库 版 本 号 ,第 三 个 参数 代表 数据 库 的 描述 信息 ,第 四 个 参数 代表 数据 库 的 大 小 , 单 


位 是 KB。 该 方法 执行 时 ,如 果 第 一 个 参数 指明 的 数据 库 不 存在 , 则 会 创建 该 数据 库 , 并 
返回 数据 库 访问 对 象 ; 若 该 数据 库 已 存在 , 则 直接 返回 该 数据 库 的 访问 对 象 。 


2. 调用 transaction 方法 


一 般 需 要 把 SQL 命令 的 执行 放 在 事务 中 ,这 样 可 以 防止 在 对 数据 库 进行 访问 和 执行 
相关 操作 时 被 其 他 操作 干扰 。 因 为 很 有 可 能 同时 有 多 个 用 户 在 对 数据 库 进 行 访 问 , 若 正 
在 操作 的 数据 被 其 他 用 户 修改 ,就 会 引起 很 多 意 想不到 的 后 果 。 因 此 ,可 以 使 用 事务 处 
理 ,在 当前 操作 完成 之 前 阻止 其 他 用 户 访问 和 操作 数据 库 。 

transaction 方法 的 使 用 如 下 。 


db.transaction (function (tx){ 
tx.executeSql (SQL, [valuel, value?2, *…], dataHandler, errorHandler); 
J 
transaction 方法 的 参数 用 于 设置 一 个 回调 函数 .这 个 回调 函数 的 参数 就 是 开启 的 : 
务 对 象 ,通过 此 事务 对 象 ,可 以 执行 SQL 命令 。 


3. 通过 executeSq| 方法 执行 SQL 命令 


ji 
a 





executeSql 的 完整 定义 格式 如 下 。 
tx.executeSq] (SQL, [valuel, value2, *…], dataHandler, errorHandler); 


该 方法 的 4 个 参数 的 含义 分 别 是 : 第 一 个 参数 代表 需要 执行 的 SQL 命令 。 


看 
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第 二 个 参数 代表 用 于 替换 SQL 命令 中 所 有 参数 占 位 符 的 数组 。SQL 命令 中 的 参数 
值 可 以 使 用 *?” 占 位 符 代替 ,然后 依次 将 用 于 替换 这 些 占 位 符 的 变量 放 在 数组 中 即 可 。 
例如 : 


tx.executeSql ("select * frommytable where username=? and password=?", 


[username, password]); 


第 三 个 参数 代表 成 功 执行 SQL 命令 时 调用 的 回调 函数 。 该 回调 函数 包含 两 个 参数 : 
第 一 个 参数 为 事务 处 理 对 象 ;第 二 个 参数 为 执行 查询 操作 时 返回 的 结果 集 对 象 。 该 回调 
函数 的 定义 格式 如 下 。 


function dataHandler (transaction, results){ 


// 执 行 SQL 命令 成 功 时 需要 进行 的 操作 
} 


第 四 个 参数 代表 执行 SQL 命令 失败 时 调用 的 回调 函数 。 该 回调 函数 包含 两 个 参数 : 
第 一 个 参数 为 事务 处 理 对 象 ;第 二 个 参数 为 执行 SQL 命令 发 生 错 误 时 返回 的 错误 信息 。 
该 回调 函数 的 定义 格式 如 下 。 


function errorHandler (transaction, errormsg) { 
// 执 行 SQL 命令 失败 时 需要 进行 的 操作 
} 


当 执 行 的 SQL 命令 为 查询 操作 时 ,通常 会 使 用 for 循环 遍历 查询 的 结果 集 数据 。 结 
果 集 对 象 有 一 个 rows 属性 ,其 中 保存 了 结果 集中 的 每 一 条 记录 ,记录 的 个 数 可 以 使 用 
rows. length 获取 。 在 for 循环 的 循环 体 中 使 用 rows[index] 或 者 rows. item(index) 依 次 
取出 结果 集中 的 每 条 记录 。 需 要 注意 的 是 ,Google 的 Chrome5 浏览 器 不 支持 rows. item 
(index) 的 写法 。 

例如 ,使 用 如 下 语句 可 以 将 结果 集中 的 所 有 数据 依次 取出 。 


db.transaction (function (tx) { 
tx.executeSql ("select * from mytable ", [], 
function (ts, results) { 
if(results) { 
for (var i=0; i<results.rows.length; i++) { 
results.rows[i]; // 获 取 结 果 集 中 的 第 i 行 数据 
// 或 者 使 用 result.rows.item(i); 


}, 
function (ts, message) { 
alert (message); 


Ds; 
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11.2.2 项 目 : 简易 留言 本 


1. 项目 说 明 


实现 一 个 简易 的 留言 本 功能 。 在 留言 本 页 面 上 输入 用 户 名 、 留 言 标题 和 留言 内 容 , 单 
击 “ 保 存 ” 按 钮 ,将 所 有 留言 信息 保存 到 本 地 数据 库 中 ,如 图 11.6 所 示 。 



































用 户 名 ， 苦 三 
标题 ，。 医 远 全 和 此 网 页 显示 : 
言 ， “民有 世 和 和 二 计 保 存 世 功 





图 11.6 保存 留言 


单 击 “ 查 看 留言 本 ”按钮 ,可 以 查看 当前 数据 库 中 的 所 有 留言 信息 ,显示 留言 的 用 户 
名 、 留 言 标题 和 留言 内 容 , 如 图 11.7 所 示 。 





用 户 名 ， 苇 三 
标题 ， 。 区 证 快乐 
留言 ，。 | 投 大 家 至 证 快乐 


区 
[本 ] | 汪 宇 久 言 本 | 
古 户 名 [标题 EE 

三 _ 皮 说 快 条 辣 大 家 至 诈 快 和 










































































11.7 查看 留言 内 容 


















































单 击 * 清 空 留言 本 ?按钮 ,可 以 将 本 地 数据 库 中 保存 的 所 有 留言 信息 清除 ,如 图 11. 8 
所 示 。 
用 户 名 ， 华 三 
标题 ，。 医 证 快乐 此 网 页 显示 : 
留言 ， | 各 大 家 至 弃 快 乐 已 清空 导言 本 所 有 久 计 
区 加 口 禁止 此 页 再 显示 对 话 框 。 
we | | 
图 11.8 清空 留言 本 
2. 项 目 设计 


本 项 目 需 要 实现 一 个 能 够 保存 查看、 清空 留言 信息 的 简单 留言 本 功能 。 所 有 的 留言 
信息 都 可 以 使 用 HTML5 中 新 引入 的 本 地 数据 库存 储 。 这 里 不 使 用 HTML5 提供 的 
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localStorage 本 地 存储 技术 的 原因 是 ,该 对 象 只 适合 存储 简单 数据 结构 的 数据 ,而 复杂 的 
数据 结构 更 适合 使 用 HTML5 的 本 地 数据 库存 储 。 

本 项 目 通过 JavaScript 在 客户 端 本 地 创建 一 个 数据 库 , 将 留言 信息 存在 本 地 数据 库 
中 ,这 样 避免 了 频繁 访问 服务 端 数据 ,可 以 提高 Web 应 用 的 性 能 ,减轻 服务 器 端的 负担 。 
利用 SQL 命令 对 本 地 数据 库 中 的 数据 表 进 行 增 \ 删 、 改 、 查 操作 ,以 完成 留言 的 添加 、 删 
除 、 修 改 和 查询 功能 。 

在 留言 本 页 面 中 放置 “保存 ”“ 查 看 留言 本 ”和 ”清空 留言 本 ?按钮 ,并 设置 “保存 ?按钮 
的 单 击 事件 处 理 函 数 为 save(),， “查看 留言 本 ”按钮 的 单 击 事件 处 理 函 数 为 showAll()， 
“清空 留言 本 ”按钮 的 单 击 事件 处 理 函 数 为 clearAll() 。 

(1) initDB() 方 法 。 

首先 利用 getDB() 创 建 或 者 连接 数据 库 ,然后 利用 该 方法 返回 的 数据 库 对 象 db 调用 
transaction() 方 法 启动 一 个 事务 ,并 在 参数 中 设置 其 回调 函数 。 在 回调 函数 中 利用 事务 
对 象 trans 的 executeSql() 方 法 执行 SQL 命令 ,创建 表 名 为 “message” 的 数据 表 , 用 于 保 
存留 言 信息 。 

(2) getDB() 方 法 。 

利用 openDatabase( ) 方 法 创建 访问 数据 库 “mydb” 的 对 象 , 若 该 数据 库 已 经 存在 , 则 
直接 返回 该 数据 库 的 访问 对 象 db。 若 当前 浏览 器 不 支持 HTML5 的 本 地 数据 库 , 则 弹出 
“您 的 浏览 器 不 支持 HTML5 本 地 数据 库 ” 的 警告 信息 ,并 返回 False。 

(3) save() 方 法 。 

首先 利用 getDB() 得 到 数据 库 访问 对 象 db, 然 后 调用 db 对 象 的 transaction() 方 法 启 
动 一 个 事务 ,并 在 参数 中 设置 其 回调 函数 。 在 回调 函数 中 利用 事务 对 象 trans 的 
executeSql() 方 法 执行 SQL 命令 ,使 用 “insert into message (username, title, content) 
values(?,?,?)” 命 令 向 数据 表 中 添加 一 条 留言 记录 。 若 SQL 命令 执行 成 功 , 则 弹出 对 话 
框 提示 “留言 保存 成 功 ”; 否 则 弹出 对 话 框 提示 错误 信息 。 

(4) showAll() 方 法 。 

首先 利用 document. getElementById ( ) 方 法 找到 id 为 show 的 元 素 , 并 将 其 
innerHTML 属性 设置 为 空 , 即 清空 该 元 素 体 的 所 有 内 容 。 然 后 利用 getDB() 得 到 数据 库 
访问 对 象 db ,调用 db 对 象 的 transaction() 方 法 启动 一 个 事务 ,并 在 参数 中 设置 其 回调 函 
数 。 在 回调 函数 中 利用 事务 对 象 trans 的 executeSql() 方 法 执行 SQL 命令 ,使 用 “select 
x* from message" 命 令 查询 数据 表 中 的 所 有 内 容 。 若 SQL 命令 执行 成 功 , 则 循环 遍历 返 
回 的 结果 集 result, 利用 result. rows. item (i) 获取 result 中 的 第 i 行 数据 ,并 使 用 
writeTable() 方 法 填充 表格 中 的 相应 的 单元 格 ;否则 弹出 对 话 框 提示 错误 信息 。 

(5) writeTable() 方 法 。 

该 方法 的 参数 data 用 于 接收 结果 集 对 象 result 的 第 i 行 数据 ,依次 取出 data 中 的 各 
项 数据 ,包括 用 户 名 (data. username)、 留 言 标题 (data. title) 、 留 言 内 容 (data. content) ,并 
将 各 项 数据 填充 到 表格 中 一 行 的 每 一 个 单元 格 中 。 

(6) clearAll() 方 法 。 

首先 利用 document. getElementById ( ) 方法 找到 id 为 show 的 元 素 , 并 将 其 
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innerHTML 属性 设置 为 空 , 即 清空 该 元 素 体 的 所 有 内 容 。 然 后 利用 getDB() 得 到 数据 库 
访问 对 象 db ,调用 db 对 象 的 transaction() 方 法 启动 一 个 事务 ,并 在 参数 中 设置 其 回调 函 
数 。 在 回调 函数 中 利用 事务 对 象 trans 的 executeSql() 方 法 执行 SQL 命令 ,使 用 delete 
from message 命令 清空 数据 表 中 的 所 有 内 容 。 若 SQL 命令 执行 成 功 , 则 弹出 对 话 框 提 示 
“已 清空 留言 本 所 有 留言 >; 和 否则 弹出 对 话 框 提示 错误 信息 。 


3. 项 目 实施 
本 项 目 代码 如 下 。 


< !DOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"/> 
<title> 留 言 本 < /title> 
< Script type= "text/javascript"> 
window.onload= function() { 
initDB () 7 
} 
function initDB() { 
Var db= getDB (); 
if (db) { 
db.transaction (function (trans) { // 启 动 一 个 事务 ,并 设置 回调 函数 
// 执 行 创建 表 的 SQL 脚本 
trans .executeSq] ("create table if not exists message (username text null, 
title text null, content text null)", [],function (trans, result) { 
后 
function (trans, message) { 
alert (message); 
yn 


» 
有 
// 打 开 数 据 库 ,或 者 直接 连接 数据 库 , 如 果 数 据 库 不 存在 , 则 创建 该 数据 库 
function getDB (){ 
// 参 数 含义 : 数据 库 名 ,版 本 号 ,描述 ,大 小 
Var db= openDatabase ("mydb", "1.0", "My Message Pad", 1024 * 1024); 
if(!db) { 
alert ("您 的 浏览 器 不 支持 HIML5 本 地 数据 库 "); 
return false; 
} 
return db; 
} 
// 保 存留 言 
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function save(){ 
Var Username= document.getElementBYId("username") .value; 
Var title=document .getElementById("title") .value; 
Var content= document .getElementById ("content") .value; 
Var db= getDB (); 
if (db) { 
// 执 行 soL 肢 本 ,插入 数据 


db.transaction (function (trans) { 


trans .executeSq] ("insert into message (username, title, content) values (?,?, 


[username, title, content], 
function (ts, data) { 
alert ("留言 保存 成 功 "); 
}, 
function (ts, message) { 
alert (message); 
Bs 
ys 


// 显 示 数 据 表 中 的 所 有 数据 
function showAll() { 
Var show= document .getElementById ("show"); 
show.innerHTMI= ""; 
Var db= getDB (); 
if (db) { 
db.transaction (function (trans) { 
trans .executeSql ("select * from message ", [], 
function (ts, result) { 
if(result) { 


show.innerHTML+= "<th> 用 户 名 < /th><th> 标 题 < /th> <th> 留 言 


</th> "7 
for (var i=0; i<result.rows.length; i++) { 
writeTable (result .rows.item(i)); 


}, 
function (ts, message) { 
alert (message); 
天 
Ds; 


// 将 数据 填充 到 表格 的 单元 格 中 
function writeTable(data) { 
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ys 
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Var show= document .getElementById ("show"); 
Var username= data.username; 
Var title=data.title; 
var content=data.content; 
Var str=""; 
str+="<tr>"; 
strt="<td>"+usernamet "< /td> "7 
strt+="<td>"+titlet "< /td> "7 
strt+="<td>"+content+ "< /td> "7 
Str+= "< /tr> "7 


Show.innerHTML+= str; 


} 
// 清 空 数据 表 中 的 所 有 数据 
function clearAll() { 
Var show= document .getElementById ("show"); 
Show.innerHTMI 一 ""7 
Var db= getDB(); 
if (db){ 
db.transaction (function (trans) { 
trans .executeSq]l ("delete from message ", [], 
function (ts, data) { 
alert ("已 清空 留言 本 所 有 留言 "); 
}, 
function (ts, message) { 


alert (message); 


</script> 
</head> 
<body> 
<table> 
<tr> 
<td> 用 户 名 : </td> 
<td>< input type= "text" name= "userame"” id= "username" required/> 
</to> 
A 
<tr> 
<td> 标 题 : < /td> 
<td>< input type= "text" name= "title" id= "title" required/></td> 
/er 


<tr> 
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<td> 留 言 : < /td> 
<td><textarea name= "content" id- "content" required/> 
</textarea>< /td> 
</tr> 
</table> 
<input type= "button" value=" 保 存 " id= "save" onClick= "save()"/> 
<hr> 
<input type= "button" value=" 查 看 留言 本 " onClick= "showRl11 () "/> 
<input type= "button" value= "清空 留言 本 "onclick= "clearAll1()"/> 
<p> 
<table id= "show" border="1">< /table> 
</p> 
< /body> 
</html> 


将 以 上 HTML 文件 保存 为 “留言 本 . html”, 使 用 浏览 器 打开 ,输入 留言 者 的 姓名 、 留 
言 标题 和 留言 内 容 , 单 击 “ 保 存 ” 按 钮 ,观察 弹出 的 对 话 框 的 提示 信息 是 否 是 “留言 保存 成 
功 ”。 单 击 “ 查 看 留言 本 ”按钮 .观察 是 否 显示 了 所 有 留言 信息 。 单 击 “ 清 空 留言 本 ”按钮 ， 
观察 弹出 的 对 话 框 的 提示 信息 是 否 是 “已 清空 留言 本 所 有 和 留言”, 并且 观察 显示 留言 本 内 
容 的 表格 的 所 有 内 容 是 否 已 经 清空 。 


4. 知识 运用 


为 留言 本 添加 查找 留言 功能 (实现 为 模糊 查询 ) ,实现 简单 的 组 合 条 件 查询 。 可 以 输 
入 用 户 名 、 留 言 标题 或 留言 内 容 关 键 字 ,查找 相关 留言 信息 。 如 没有 输入 任何 查询 信息 ， 
则 显示 当前 留言 本 中 的 所 有 留言 信息 ,如 图 11.9 所 示 。 
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图 11.9 查看 所 有 留言 


若 输 入 用 户 名 和 留言 标题 信息 , 则 查找 所 有 满足 用 户 名 和 留言 标题 查询 条 件 的 留言 
内 容 。 例 如 ,输入 用 户 名 为 “ 张 ”. 留 言 标题 为 “快乐 ”, 查 询 结 果 如 图 11. 10 所 示 。 
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11.10 查找 符合 条 件 的 留言 
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本 项 目 要 实现 的 功能 属于 综合 项 目 中 的 商品 详情 页 面 的 加 入 购物 车 功能 ,购物 车 页 
面 的 查看 购物 车 信息 功能 和 删除 购物 车 商品 功能 模块 。 本 项 目 需要 使 用 本 章 学 习 的 
HTML5 中 新 引入 的 本 地 存储 技术 实现 购物 车 功能 。 

(1) 加 入 购物 车 功能 : 这 个 功能 可 以 使 用 HTML5 中 新 引入 的 本 地 存储 技术 ,在 客 
户 端 创建 本 地 数据 库 和 数据 表 , 用 于 存储 添加 到 购物 车 的 商品 信息 。 

(2) 查看 购物 车 信息 功能 : 获取 本 地 数据 库 中 购物 车 表 的 商品 信息 ,在 购物 车 页 面 
列表 显示 结果 。 

(3) 删除 购物 车 中 的 商品 功能 : 对 本 地 数据 库 中 购物 车 表 的 对 应 信息 执行 删除 操 
作 , 将 所 选 商品 记录 从 购物 车 中 删除 。 


11.3.1 项 目 说 明 


使 用 浏览 器 打开 “商品 详情 . html” 页 面 , 单 击 * 加 入 购物 车 ” 超 链接 ,提示 “添加 成 功 ”， 
如 图 11.11 所 示 。 

单 击 商品 详情 页 面 上 方 的 “购物 车 ” 超 链 接 , 打 开 购 物 车 页 面 ,显示 购物 车 中 的 商品 信 
息 ,如 图 11.12 所 示 。 

单 击 购 物 车 页 面 商 品 后 方 的 “删除 ” 超 链接 ,将 商品 从 购物 车 中 删除 ,如 图 11. 13 
所 示 。 

在 本 项 目 中 ,主要 需要 完成 以 下 3 个 功能 。 

(1) 加 入 购物 车 功能 : 在 商品 详情 页 面 单 击 “ 加 入 购物 车 ”按钮 ,将 此 商品 添加 到 购 
物 车 中 。 

(2) 查看 购物 车 信息 功能 : 在 购物 车 页 面 中 ,列表 显示 购物 车 表 中 目前 保存 的 所 有 
商品 信息 。 

(3) 删除 购物 车 中 的 商品 功能 : 在 购物 车 页 面 中 单 击 商 品 后 方 的 “删除 ” 超 链接 ,将 
该 商品 从 购物 车 中 删除 。 
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图 11.11 商品 详情 页 面 的 加 入 购物 车 功能 
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图 11.12 购物 车 页 面 显 示 的 商品 信息 
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图 11.13 购物 车 页 面 删 除 商品 信息 








11.3.2 项 目 设计 

在 本 项 目 中 需要 完成 的 功能 的 设计 思路 如 下 。 

1. 在 商品 详情 页 面 中 编写 初始 化 函数 

编写 初始 化 函数 initDB() ,用 于 创建 购物 车 表 cart, 可 以 保存 添加 到 购物 车 的 商品 信 
息 , 包 括 商 品名 .单价 ,数量 商品 描述 .商品 图 片 信 息 等 。 

2. 在 商品 详情 页 面 中 实现 加 入 购物 车 功能 

首先 为 "加 入 购物 车 ? 超 链接 添加 鼠标 单 击 事件 处 理 函 数 addCart() : 
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<a href="" onClick= "addcart ()"> 加 入 购物 车 < /a> 


然后 编写 addCart() 函数, 获取 要 添加 到 购物 车 的 商品 的 商品 名 、 单 价 、 商 品 描述 、 商 
品 图 片 信息 , 接 下 来 , 先 执行 select 命令 ,判断 当前 商品 是 否 之 前 已 经 在 购物 车 中 添加 过 ， 
如 果 是 , 则 使 用 update 命令 更 新 购物 车 表 中 的 记录 内 容 , 将 商品 数量 增 1; 否则 ,使 用 
insert into 命令 向 购物 车 表 中 添加 一 条 新 记录 。 


3. 在 购物 车 页 面 实现 查看 购物 车 信息 功能 


在 购物 车 页 面 , 当 页 面 加 载 完 毕 时 ,需要 调用 loadAll() 函数 ,从 该 函数 中 读 取 购物 车 
表 中 保存 的 现 有 的 商品 信息 ,然后 列表 显示 出 来 。 

编写 loadAll() 函 数 ,使 用 select 命令 查询 购物 车 表 中 的 所 有 数据 ,返回 的 结果 集 对 
象 为 res, 利 用 res. rows. length 判断 结果 集 是 否 为 空 , 若 不 为 空 , 则 生成 用 于 显示 商品 信 
息 的 HTML 代码 。 循 环 取出 结果 集 对 象 res 中 保存 的 每 一 项 数据 ,利用 res. rows. item(i) 
访问 结果 集 的 每 一 个 元 素 data, 可 以 取出 其 中 保存 的 商品 图 片 (data. pic)、 商 品 价格 
(data. price) 、 商 品 数量 (data. num) 和 商品 描述 (data. description) ,分 别 在 指定 的 区 域 中 
显示 。 

最 后 ,使 用 innerHTML 属性 ,将 result 中 的 HTML 代码 放 入 id 为 list 的 元 素 体 中 。 


4. 在 购物 车 页 面 实现 删除 购物 车 中 的 商品 功能 
首先 ,在 生成 “删除 ? 超 链 接 时 ,添加 其 鼠标 单 击 事件 处 理 函 数 delCart() : 


"..<a href=\"javascript:delCart ('"+ data.goodsname+ "") \" onClick= \"return confirm(' 确 定 
要 删除 吗 ?')\"> 删 除 < /a>" 


其 次 ,编写 delCart() 函 数 ,从 购物 车 中 删除 指定 商品 ,其 参数 是 所 要 删除 商品 的 商品 
名 称 。 使 用 delete 命令 可 以 把 指定 记录 从 购物 车 表 中 删除 。 
最 后 ,调用 loadAll() 方 法 重新 显示 购物 车 中 的 现 有 内 容 。 


11.3.3 项 目 实施 
1. 在 商品 详情 页 面 中 编写 初始 化 函数 initDBI 


function initDB() { 
db= getDB ()7 
if (db) { 
db.transaction (function (trans) { // 启 动 一 个 事务 ,并 设置 回调 函数 

// 执 行 创建 表 的 SQL 脚本 
trans .executeSqg] ("create table if not exists cart (goodsname text null,price 
real null,num integer null,pic text null,description text null)", [],function 
(trans, result) { 
}, 
function (trans, message) { 


alert (message); 
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Ds; 


// 打 开 数 据 库 ,或 者 直接 连接 数据 库 , 如 果 数 据 库 不 存在 , 则 创建 该 数据 库 
function getDB (){ 
// 参 数 含义 : 数据 库 名 ,版 本 号 ,描述 ,大 小 
Var db= openDatabase ("mydb", "1.0", "", 1024 * 1024); 
if(!db) { 
alert ("您 的 浏览 器 不 支持 HIML5 本 地 数据 库 "); 
return false; 
} 
return db; 


} 


2. 在 商品 详情 页 面 中 编写 添加 到 购物 车 的 函数 addCart0 


// 加 入 到 购物 车 
function adqcCart (){ 
Var goodsname= document .getElementById ("goodsname") .innerHTML; 
Var price=document.getElementById("price") .innerHTML7 
Var description= document .getElementById ("description") .innerHTML7 
Var pic=document .getElementById ("first img").src; 
//var db= getDB () 7 
if (db) { 
// 执 行 SQL 脚本 
db.transaction (function (trans) { 
Var newGoods= trans .executeSql ( 
"select * from cart where goodsname=? ", [goodsname], 
function (ts, data) { 
if (data){ 
if(data.rows.length==0)1{ 
trans .executeSql ("insert into cart values (?,3?,3,3,2)", 
[goodsname,price, 1,pic, description], 
function (ts, data) { 
alert ("添加 成 功 "); 
}, 
function (ts, message) { 
alert (message); 
Ds; 
} 
else{ 
trans .executeSql ("update cart set num= num+ 1 where goodsname=? 
", [goodsname], function (ts, data) { 
alert ("添加 成 功 "); 
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]， 

function (ts, message) { 
alert (message); 

Ds 


}, 
function (ts, message) { 
alert (message); 
return false; 
Ds; 
Wr 


3. 在 购物 车 页 面 中 编写 显示 当前 购物 车 所 有 信息 的 函数 loadAll0, 并 在 
页 面 加 载 后 调用 该 函数 


window.onload= function(){ 
loadAll ()7 
} 
function loadAll (){ 
Var list= document .getElementById ("list"); 
Var result=""; 
Var db= getDB (); 
if (db) { 
db.transaction (function (trans) { 
trans .executeSql ("select * from cart ", [], 
function (ts, res) { 
if (res) { 
if(res.rows.length!=0)1{ 


for (var i=0; i<res.rows.length; i++) { 


Var data= res.rows.item(i); 

result+="<div class=\"outter\">"; 

result+="<div class= \"divl\">< input type= \"checkbox\" 
name= \"goods\" style= \"vertical- align:top\" id= \"1\" 
onChange= \"check2 (event)\"> "7 

Tesult+= "< jimg src= '"+ data.pic+"' width=\"79\" height=\" 
80\" border= \"0\"> < div style= \"font: 12px; width: 100px; 
Vertical-align:top;display:inline- block; \"><a href=\"\" 
alt=\"\">"+data.goodsname+ "</a></div></div><div class= 
\"div2\" style= \" color: gray; font - size: 12px \">"+ data. 


description+ "< /div><div class=\"div3\" id=\"p"+ (i+1)+" 
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\>"+data.pricet "< /div><div class=\"div4A\">< input type=\" 
number\" name= \"num\" value= \""+ data.num+"\" style=\" 
width:60px;text-align:center\" onChange= \"count ("+ (i+1) 
+")\"id=\"n"+ (i+1)+"\"></div><div class=\"div5\" id=\" 
unr+ (i+1)+"\">"+ (data.price* data.num)+"</div><div class= 
\"divé\" style= \"font- size:12px; text- align:center; line— 
height:20px\"><a href=\"\"> 移 人 收藏 夹 </a><br><a href=\" 
javascript:delCart ('"+ data.goodsname+ "') \" onClick= \" 
return confirm(' 确 定 要 删除 吗 ?')\"> 删 除 </a>< /div>< div 
class=\"div1\">< /div> "7 
result+="< /div>"; 
} 


list.innerHTMI= result; 


} 


else{ 


list.innerHTML= "目前 购物 车 为 空 , 快 去 购物 吧 "7 


}, 
function (ts, message) { 
alert (message); 
is 
Ds; 


4. 在 购物 车 页 面 中 编写 删除 购物 车 中 的 商品 的 函数 delCart0 


function delCart (gn){ 
Var db= getDB (); 
if (db) { 
db.transaction (function (trans) { 
trans .executeSql ("delete from cart where goodsname=? ", [gn], 
function (ts, data) { 
}, 
function (ts, message) { 
alert (message); 

D; 
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一 、 选 择 题 


. HTML5 支持 的 Web Storage 包括 (  )。 
A. session B. sessionStorage CC. application D. localStorage 
. 方法 ( ) 可 以 将 数据 存 人 localStorage。 
A. getItem B. setltem C. key D. removeltem 
.方法 ( ) 可 以 将 数据 从 localStorage 中 删除 。 
A. getItem B. setltem C. key D. removeltem 
, 沪 法 ( ) 可 以 取出 localStorage 中 数据 的 键 名 。 
A. getltem B. setltem C. key D. removeltem 
法 ) 可 以 从 localStorage 中 取出 指定 键 名 的 数据 值 。 
A. getltem B. setltem C. key D. removeltem 
.下 列 关 于 sessionStorage 的 说 法 ,错误 的 是 ( )。 
A，sessionStorage 将 数据 保存 在 session 对 象 中 ,session 对 象 通常 在 客户 端 浏览 
器 连接 到 服务 器 时 建立 ,在 浏览 器 关闭 时 销毁 
B. sessionStorage 中 保存 的 数据 在 客户 端 浏 览 器 连接 到 服务 器 端 后 一 直到 断 开 
连接 前 ,都 可 以 访问 。 当 会 话 结束 后 ,数据 会 自动 清除 
C，sessionStorage 是 服务 器 端 保存 数据 的 对 象 
D. sessionStorage 是 临时 保存 数据 的 对 象 
. 下列 关于 localStorage 的 说 法 ,错误 的 是 ( Ys 
A. localStorage 一 直 将 数据 保存 在 客户 端 本 地 的 硬件 设备 ,如 硬盘 等 
B. 浏览 器 关闭 后 ,localStorage 中 的 数据 仍然 存在 ,当下 一 次 客户 端 浏览 器 再 次 
访问 服务 器 时 ,其 中 的 数据 仍然 可 以 继续 访问 
C. localStorage 是 客户 端 保存 数据 的 对 象 
D. localStorage 是 临时 保存 数据 的 对 象 
. 下 列 关 于 本 地 数据 库 的 说 法 ,错误 的 是 ( js 
A. HTML5 提供 了 浏览 器 端的 本 地 数据 库 支持 ,允许 直接 通过 JavaScript 在 客 
户 端 浏览 器 创建 一 个 本 地 数据 库 
B. HTML5 的 本 地 数据 库 支持 标准 SQL 的 增 、 删 、 改 、 查 操作 ,让 离线 Web 应 用 能 
够 更 加 方便 地 存储 结构 化 数据 ,大 大 丰富 了 客户 端 本 地 可 以 存储 的 数据 内 容 
C. HTML5 的 本 地 数据 库 和 HTML4 中 的 cookie 对 象 十 分 相似 
D. HTML5 内 置 了 一 个 SQLite 数据 库 作为 本 地 数据 库 , 可 以 通过 标准 SQL 访问 
. 下列 关于 openDatabase() 方 法 ,描述 正确 的 是 ( ps 
A. var db=openDatabase("mydb", "1.0", "My first DB", 2* 1024* 1024); 创 
建 的 数据 库 大 小 为 2X1024X1024B 
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B. 该 方法 执行 时 ,如 果 第 一 个 参数 指明 的 数据 库 不 存在 , 则 返回 null 
C. 该 方法 执行 时 , 若 该 数据 库 已 存在 , 则 直接 返回 该 数据 库 的 访问 对 象 
D. var db=openDatabase("mydb", "1.0", "MyFirstDB", 2 * 1024 * 1024); 创 
建 的 数据 库 名 为 MyFirstDB 
10. 下 列 关于 executeSql() 方 法 ,描述 错误 的 是 (  )。 
A. 该 方法 的 第 一 个 参数 代表 需要 执行 的 SQL 命令 
B. 该 方法 的 第 二 个 参数 代表 用 于 替换 SQL 命令 中 所 有 参数 占 位 符 的 数组 。 
SQL 命令 中 的 参数 值 可 以 使 用 “?” 占 位 符 代替 ,然后 依次 将 用 于 替换 这 些 占 
位 符 的 变量 放 在 数组 中 即 可 
C. 该 方法 的 第 三 个 参数 代表 执行 SQL 命令 失败 时 调用 的 回调 函数 
D. 该 方法 可 以 执行 标准 SQL 的 增 、 删 改 、 查 操作 
11. 如 何 利用 结果 集 对 象 的 rows 属性 访问 结果 集中 的 每 一 行 数据 ? 〈 ) 





A. rows[index] B. rows.index 
C. rows. get(index) D. rows. getltem(index) 
二 、 综 合 题 


1. 使 用 HTML5 的 sessionStorage 保存 用 户 输入 的 文本 信息 ,然后 单 击 Get data 按 

钮 将 数据 读 出 并 显示 。 实 现 如 图 11. 14 所 示 的 效果 。 
hello word Save data | | Get dala 
WF a [ea es 
此 网 页 显示 : | 
































Saved successfully 























11.14 示例 页 面 


2. 使 用 HTML5 的 localStorage 完成 用 户 登录 页 面 的 “ 记 住 密码 ”功能 。 当 输入 用 
户 名 、 密 码 并 选中 * 记 住 密码 ” 复 选 框 后 , 单 击 “登录 ?按钮 ,将 本 次 输入 的 用 户 名 和 密码 存 
入 localStorage, 当 再 次 打开 登录 页 面 后 ,从 localStorage 中 读 取 上 次 输入 的 用 户 名 和 密 
码 , 并 在 登录 表单 中 显示 。 实 现 如 图 11. 15 所 示 的 效果 。 






































图 11.15 示例 页 面 
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本 章 概述 
通过 本 章 的 学 习 ,学 生 能 够 掌握 jQuery 编程 方法 ,使 用 jQuery 库 提 供 的 方法 进行 开 
发 ,了 解 JSON 对 象 的 数据 结构 和 存储 形式 ,学 会 编辑 和 使 用 JSON 数据 ;会 使 用 Ajax 获 
取 JSON 数据 。 
学 习 重 点 与 难点 
重点 : 
(1) jQuery 选择 器 。 
(2) jQuery 事件 。 
(3) jQuery 动画 。 
(4) JSON 数据 的 格式 。 
(5) Ajax 工作 原理 。 
难点 : 
(1) jQuery 常用 方法 。 
(2) jQuery 中 的 ajax() 方 法 。 
重点 及 难点 学 习 指导 建议 : 
。 使 用 Ajax 获取 JSON 数据 进行 页 面 更 新 ,是 目前 常见 的 方法 ,该 方法 通过 jQuery 
封装 后 ,语法 更 加 简洁 。jQuery 的 知识 内 容 颇 多 ,本 书 不 再 珊 述 ,希望 大 家 自学 
并 掌握 jQuery 语法 。 
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121 jQuery 的 由 来 及 简介 


jQuery 是 一 个 快速 .简洁 的 JavaScript 库 ,能 够 简化 阅读 HTML 文档 .处 理事 件 、 实 
现 动画 以 及 向 网 页 添加 Ajax 互动 等 过 程 。jQuery 改进 了 编写 JavaScript 的 方式 。 

jQuery 作为 JavaScript 的 第 三 方 类 库 ,补充 了 JavaScript 的 不 足 , 提 供 了 更 多 方便 的 
函数 供 调 用 者 使 用 。 绝 大 部 分 网 站 开发 都 会 用 到 第 三 方 类 库 , 这 些 类 库 会 极 大 地 方便 我 
们 的 编程 。jQuery 倡导 的 原则 是 : 写 得 多 ,做 得 少 。 

。 jQuery 能 够 使 用 户 的 HTML 页 保持 代码 和 HTML 内 容 分 离 。 

。 简化 JavaScript 和 Ajax 编程 。 

。 提供 了 强大 的 功能 函数 和 丰富 的 UI( 用 户 界 面 ) ,解决 了 浏览 器 兼容 性 问题 。 

。 方便 地 处 理 HTML documents .events ,实现 动画 效果 。 


12.1.1 向 页 面 添加 jQuery 库 


jQuery 库 位 于 一 个 JavaScript 文件 中 ,其 中 包含 了 所 有 的 jQuery 函数 。 可 以 通过 下 
面 的 标记 把 jQuery 添加 到 网 页 中 。 


<head> 
<script type= "text/javascript" src= "jgquery.js">< /script> 
</head> 
注意 : 二 script 标签 应 该 位 于 页 面 的 王 head> 部 分 。 
有 两 个 版 本 的 jQuery 可 供 下 载 : 一 份 是 精简 过 的 ; 另 一 份 是 未 压缩 的 ( 供 调试 或 阅 
这 两 个 版 本 都 可 从 jQuery. com 下 载 。 
基础 语法 是 : 


读 )。 


$ (selector) .action() 

。 美元 符号 定义 jQuery。 

。 选择 符 (selector)“ 查 询 " 和 “查找 ”HTML 元 素 。 
。 jQuery 的 action() 执 行 对 元 素 的 操作 。 


例如 : 
$ ("p") .hige() // 隐 藏 所 有 段落 
$(".test") .hide () // 隐 藏 所 有 class= "test" 的 元 素 


所 有 的 jQuery 函数 都 位 于 一 个 document ready 函数 中 。 


$ (document) .ready (function (){ 

-—— jQuery functions go here --—-—— 

Ds; 

这 是 为 了 防止 文档 在 完全 加 载 (就 绪 ) 之 前 运行 jQuery 代码 。 如 果 在 文档 没有 完全 
加 载 之 前 就 运行 函数 ,操作 可 能 失败 。 下 面 是 两 个 具体 的 例子 。 
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”试图 隐藏 一 个 不 存在 的 元 素 。 


。 获得 未 完全 加 载 的 图 像 的 大 小 。 
文档 就 绪 函 数 $(document). ready(Cfunction(){)); 可 以 简写 成 $Cfunction(){1)) 3; 。 


12.1.2 项 目 : 第 一 个 jQuery 程序 


1. 项 目 说 明 
编写 第 一 个 jQuery 程序 ,弹出 警告 框 ,输出 Hello World, 并 且 在 浏览 器 中 查看 和 展 


示 页 面 。 

2. 项 目 设计 

首先 ,在 HTML 页 面 引入 库 文件 jQuery. min. js, 然 后 ,在 一 script 二 与 二 /script 二 标 
签 之 间 编 程 , 在 文档 就 绪 函 数 中 写 下 alert("Hello World")。 


3. 项 目 实施 
打开 编辑 器 ,输入 如 下 代码 。 


< !DOCTYPE html> 
<html> 
<head> 
<script type= "text/javascript" src="js/jquery.min.js"></script> 
<script> 
$ (function() { 
alert ("Hello World"); 
]) 
</script> 
</head> 
<body> 
</body> 
</html> 
在 浏览 器 内 运行 ,显示 效果 如 图 12. 1 所 示 。 











127.0.0.1:81 显示 


Hello World 





图 12.1 第 一 个 jQuery 程序 
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122 jQuery 选择 器 
12.2.1 基本 选择 器 


jQuery 使 用 CSS 选择 器 选取 HTML 元 素 。 

。 ID 选择 器 $(" # box")。 

。 类 选择 器 $(". classname")。 

”标签 选择 器 $("div")。 

例如 : 

$("p") 选 取 二 p 二 元 素 。 

$("p. intro") 选 取 所 有 class 二 "intro" 的 二 p 志 元素 。 

$("p# demo") 选 取 所 有 id 一 "demo" 的 一 p 二 元素。 

$("li:odd") 选 取 所 有 奇数 二 li 二 元 素 。 

$("li:eq(1)") 选 取 所 有 二 1 二 中 的 第 二 个 元 素 (index 从 0 开始 ) 。 

$C"li:lt(2)") 选 取 所 有 一 li 中 index 小 于 2 的 元 素 (index 从 0 开始 ) 。 
12.2.2 层次 选择 器 

可 以 把 文档 中 的 所 有 节点 与 节点 之 间 的 关系 用 传统 的 家 族 关系 描述 。 如 果 把 文档 树 
当 作 一 个 家 谱 , 那 么 节点 与 节点 之 间 就 会 存在 父子 、 兄 弟 、 祖 孙 的 关系 。 

如 果 想 通过 DOM 元 素 之 间 的 层次 关系 获取 特定 元 素 , 如 后 代 元 素 、 子 元 素 、 相 邻 元 
素 、 兄 弟 元 素 等 , 则 需要 使 用 层次 选择 器 。 

层次 选择 器 的 用 法 见 表 12. 1 。 

表 12.1 层次 选择 器 的 用 法 
选 择 器 实 例 描 述 


子 选择 器 : 选择 所 有 指定 parent 元 素 中 指定 的 child 的 
直接 子 元 素 


后 代 选 择 器 : 选择 给 定 祖 先 ancestor 元 素 的 所 有 后 代 
元 素 ,包括 子 元 素 、 孙 子 元 素 等 全 部 后 代 元 素 


相 邻 兄弟 选择 器 : 选择 所 有 紧 接 在 prev 元 素 后 的 next 
元 素 

一 般 兄 弟 选择 器 :匹配 prev 元 素 之 后 的 所 有 兄弟 元 素 。 
具有 相同 的 父 元 素 , 并 匹配 过 滤 出 siblings 选择 器 








$("parent> child") $("ul>1") 





$("ancestor descendant") | $C"ul 1i") 





$("prev+ next") $(". prev+ div") 





$("prev~siblings") $(". prev~div") 











注意 : 〈“. prev 一 div”) 选 择 器 只 能 选择 “. prev” 元 素 后 面 的 同辈 元 素 ; 而 jQuery 中 的 
方法 siblings() 与 前 后 位 置 无 关 , 只 要 是 同辈 节点 ,就 可 以 选取 。 

层次 选择 器 之 间 的 相似 点 与 不 同 点 如 下 。 

(1) 层次 选择 器 都 有 一 个 参考 节点 。 
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(2) 后 代 选 择 器 包含 子 选 择 器 选择 的 内 容 。 
(3) 一 般 兄 弟 选择 器 包含 相 邻 兄弟 选择 的 内 容 。 
(4) 相 邻 兄弟 选择 器 和 一 般 兄 弟 选 择 器 选择 的 元 素 必须 在 同一 个 父 元 素 下 。 


12.2.3 过 滤 选 择 器 


过 滤 选 择 器 主要 是 通过 特定 的 过 滤 规 则 筛选 出 所 需 的 DOM 元 素 ,该 选择 器 都 以 *:” 
开关 5 

按照 不 同 的 过 滤 规 则 ,过 滤 选 择 器 又 可 分 为 基本 过 滤 、 内 容 过 滤 、 可 见 性 过 滤 、 属 性 过 
渡 、 子 元 素 过滤 和 表单 对 象 属性 过 滤 选 择 器 。 


1. 基本 过 滤 选 择 器 
基本 过 滤 选 择 器 见 表 12. 2 。 
表 12.2 基本 过 滤 选 择 器 






































选 择 器 实 例 选 取 
:first $("p:first") 第 一 个 二 p 二 元 素 

:last $("p:last") 最 后 一 个 二 p 二 元 素 

:even $("tr:even") 所 有 偶数 二 tr 二 元 素 

:odd $("tr:odd") 所 有 奇数 二 tr 二 元 素 
:eq(index) $("ul li,eq(3)") 列表 中 的 第 四 个 元 素 (index 从 0 开始 ) 
:gt(no) $C"ul li:gt(3)") 列 出 index 大 于 3 的 元 素 
:lt(no) $C"ul li:lt(3)") 列 出 index 小 于 3 的 元 素 
:not(selector) $("input: not( :empty)") 所 有 不 为 空 的 input 元 素 
:header $(" :header") 所 有 标题 元 素 二 hl 之 一 一 h6 二 
:animated $(":animated") 所 有 当前 正在 动 的 动画 元 素 
2. 内 容 过 滤 选 择 器 


内 容 过 滤 选 择 器 的 过 滤 规则 主要 体现 在 它 所 包含 的 子 元 素 和 文本 内 容 上 , 见 
表 12.3。 


表 12.3 ”内容 过 滤 选 择 器 




















选 择 器 和 例 选 取 
:contains(text) $(" :contains("W3School)") | 包含 指定 字符 串 的 所 有 元 素 
:empty $(":empty") 无 子 (元 素 ) 节 点 的 所 有 元 素 
站 二 俱 址 多 从 元 元 素 ， 
:has(selector) $("p:has(span)") sn 个 元 家 在 其 内 的 元 宗 , 匹 
:parent $("td:parent") 选取 所 有 包含 子 节点 或 文本 节点 的 元 素 


大 
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3. 可 见 性 过 渡 选 择 器 


可 见 性 过 滤 选 择 器 ( 表 12. 4) 是 根据 元 素 的 可 见 和 不 可 


见 状态 选择 相应 的 元 素 。 


可 见 选择 器 :hidden 不 仅 包含 样式 属性 display 为 none 的 元 素 , 也 包含 文本 隐藏 域 
(一 input type 二 "hidden" 记 ) 和 visible:hidden 之 类 的 元 素 。 


表 12.4 可 见 性 过 滤 选 择 器 














选 择 器 实 例 选 取 
$("p:hidden") 所 有 隐藏 的 二 p 之 元 素 
:visible $("table: visible") 所 有 可 见 的 表格 

4. 属性 过 滤 选 择 器 


属性 过 滤 选 择 器 的 过 滤 规 则 是 通过 元 素 的 属性 获取 相应 的 元 素 , 见 表 12. 5。 
表 12.5 ”属性 过 滤 选 择 器 


选 择 器 


实 例 


选取 





[attribute] 


$("[Chref]") 


所 有 带 有 href 属性 的 元 素 





[attribute= value] 


$("[href='#]") 


所 有 href 属性 的 值 等 于 “# ”的 元 素 





[attribute! =value] 


$("[href! 一 '# 站 ") 


所 有 href 属性 的 值 不 等 于 “#” 的 元 素 





[attribute$= value] 


$("[href$=" jpg]") 





5. 子 元 素 过 渡 选 择 器 
子 元 素 过 滤 选 择 器 见 表 12. 6。 





所 有 href 属性 的 值 包含 以 “.jpg” 结 尾 的 元 素 


表 12.6 子 元 素 过滤 选 择 器 








选 择 器 实 例 选 取 
:first-child $("p:first-child") 属于 其 父 元 素 的 第 一 个 子 元 素 的 所 有 二 p 志 元素 
:last-child $("p:last-child") 属于 其 父 元 素 的 最 后 一 个 子 元 素 的 所 有 二 p 二 元素 





:nth-child(n) 


$C"p:nth-child(2)") 


属于 其 父 元 素 的 第 二 个 子 元 素 的 所 有 二 p> 元 素 





:only-child 








$("p:only-child") 


nth-child() 选 择 器 详解 如 下 。 


和 
(2) 


属于 其 父 元 素 的 唯一 子 元 素 的 所 有 二 p 二 元 素 


:nth-child(even/odd): 能 选取 每 个 父 元 素 下 的 索引 值 为 偶 ( 奇 ) 数 的 元 素 。 
:nth-child(2): 能 选取 每 个 父 元 素 下 的 索引 值 为 2 的 元 素 。 


(3) :nth-child(3n) : 能 选取 每 个 父 元素 下 的 索引 值 为 3 的 倍数 的 元 素 。 


(4) 
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:nth-child(3n 十 1): 能 选取 每 个 父 元 素 下 的 索引 值 为 3n 十 1 的 元 素 。 
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6. 表单 对 象 铬 性 过 波 先 择 器 
表单 对 象 属性 过 滤 选 择 器 主要 对 所 选择 的 表单 元 素 进 行 过 滤 , 见 表 12.7。 
表 12.7 ”表单 对 象 属性 过 滤 选 择 器 

















选 择 器 实 例 选 取 
:enabled $(" :enabled") 所 有 启用 的 元 素 
:disabled $(" :disabled") 所 有 禁用 的 元 素 
:selected $(":selected") 所 有 选 定 的 下 拉 列 表 元 素 
:checked $(" :checked") 所 有 选中 的 复 选 框 选 项 








12.2.4 表单 元 素 选择 器 
与 表单 元 素 相关 的 选择 器 见 表 12. 8。 
表 12.8 与 表单 元 素 相关 的 选择 器 






































选 择 器 实 例 选 取 

:input $(C" :input") 所 有 一 input 之 元 素 

:text $(":text") 所 有 type= "text" 的 一 input 之 元 素 
:password $(":password") 所 有 type 二 "password" 的 二 input 二 元素 
:radio $(":radio") 所 有 type 二 "radio" 的 二 input 二 元素 
:checkbox $(":checkbox") 所 有 type 王 "checkbox" 的 一 input 之 元 素 
:Submit $(" :submit") 所 有 type 一 "submit" 的 一 input 之 元 素 
:reset $(":reset") 所 有 type 一 "reset" 的 一 input 之 元 素 
:button $(" :button") 所 有 type 二 "button" 的 二 input 二 元素 
:image $(".:image") 所 有 type 二 "image" 的 二 input 志 元 素 
:file $(" .file") 所 有 type 二 "file" 的 二 input 二 元素 
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1. css( 方 法 


css() 方 法 返回 或 设置 匹配 的 元 素 的 一 个 或 多 个 样式 属性 。 
语法 1: 返回 第 一 个 匹配 元 素 的 CSS 属性 值 。 当 用 于 返回 一 个 值 时 ,不 支持 简写 的 
CSS 属性 (如 "background" 和 "border")。 


$ (selector) .css (name) 


例如 ,取得 第 一 个 段落 的 color 样式 属性 的 值 。 


HTMLS+CSS3+JavaSeript 项 肯 开发 


$ ("p") .css ("color"); 


语法 2: 设置 所 有 匹配 元 素 的 指定 CSS 属性 。 
$ (selector) .css ({property:value, property:value, ...}); 


例如 ,设置 多 个 样式 。 


$('div') .css ("background", "#bfa™"); 
$("p") .css({ "color":"white", "background- color":"#98bf21", "font- family":"Arial", "font 
-size":"20px", "padding":"5px" }); 


2. html0 方 法 


html() 方 法 返回 或 设置 被 选 元 素 的 内 容 (inner HTML)。 

语法 1: 当 使 用 该 方法 返回 一 个 值 时 , 它 会 返回 第 一 个 匹配 元 素 的 内 容 。 
$ (selector) .html () 

例如 : 


<html> 
<head> 
<script type= "text/javascript" src="/jquery/jquery.js">< /script> 
<script type= "text/javascript"> 
$ (document) .ready (function (){ 

$(".btnl") .click(function(){ 

console.1og($("p") .html ()); 

D; 
Ds; 
</script> 
< /head> 
<body> 
<p> textl< /p><p> text2< /p><p> text3< /p> 
<button class= "btnl"> 获 取 p 元 素 的 内 容 < /button> 
< /body> 
</html> 


输出 : 

text1 

语法 2: 当 使 用 该 方法 设置 一 个 值 时 , 它 会 覆盖 所 有 匹配 元 素 的 内 容 。 
$ (selector) .html (content) 

例如 : 


$ ("span") .html (5); 
$ ("p") .html ("Hello<b>world< /b> !"); 


3. Val0 方 法 
val() 方 法 返回 或 设置 被 选 元 素 的 值 。 
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元 素 的 值 是 通过 value 属性 设置 的 。 该 方法 大 多 用 于 input 元 素 。 如 果 该 方法 未 设 
置 参数 , 则 返回 被 选 元 素 的 当前 值 。 
语法 1: 返回 第 一 个 匹配 元 素 的 value 属性 的 值 。 


$ (selector) .val () 

例如 : 

$ ("input :text") .val () 

语法 2: 设置 value 属性 的 值 。 
$ (selector) .val (value) 

例如 : 


$ ("button") .click (function(){ 
$(":text") .val ("Hello World"); 
Ds; 


语法 3: 使 用 函数 设置 value 属性 的 值 。 
$ (selector) .val (function (index,oldvalue)) 
例如 : 


<html> 
<head> 
<script type= "text/javascript" src="/jquery/jquery.js">< /script> 
< script type= "text/javascript"> 
$ (document) .ready (function (){ 
$ ("button") .click (function(){ 
$ ("input:text") .val (function (n,c){ 
return c+" Gates"+n; 
Ds; 
ye 
Ds; 
</script> 
</head> 
<body> 
<p> Name:< input type= "text" name= "user" value= "Bill" />< /p> 
<p> Name:< input type= "text" name= "user" value= "Ruth" />< /p> 
<button> 设 置 文本 域 的 值 < /button> 
< /body> 
</htm> 


输出 : 


所 MLS+cSSs+J8Veseribt 而 轩 胸 妥 


Name: Bil Gates0 





Name: Ruth Gates1 
EE 


4. Size( 方 法 








size() 方 法 返回 被 jQuery 选择 器 匹配 的 元 素 的 数量 。 
语法 : 

$ (selector) .size() 

例如 : 输出 被 jQuery 选择 器 匹配 的 元 素 的 数量 。 


$ ("button") .click(function(){ 
alert ($ ("1i") .size()); 
Ds; 


5. append0 方 法 

append() 方 法 在 被 选 元 素 的 结尾 (仍然 在 内 部 ) 插 入 指定 内 容 。 
语法 : 

$ (selector) .append (content) 

例如 : 在 每 个 p 元 素 结尾 插入 内 容 。 


$ ("button") .click(function(){ 
$ ("p") .append ("<b> Hello world!< /b> "); 
Wg 


6. attr0 方 法 


attr() 方 法 设置 或 返回 被 选 元 素 的 属性 和 值 。 

如 果 该 方法 用 于 返回 属性 值 , 则 返回 第 一 个 匹配 元 素 的 值 。 如 果 该 方法 用 于 设置 属 
性 值 , 则 为 匹配 元 素 设置 一 个 或 多 个 属性 / 值 对 。 

语法 : 

返回 属性 的 值 : 





$ (selector) .attr (attribute) 

设置 属性 和 值 : 

$ (selector) .attr (attribute, value) 

使 用 函数 设置 属性 和 值 : 

$ (selector) .attr (attribute, function (index, currentvalue)) 


设置 多 个 属性 和 值 : 


和 区 1 和 饼  0auky 入 二 


$ _ (selector) .attr({attribute:value,attribute:value, ...}) 
例如 : 设置 图 像 的 width 属性 。 


$ ("button") .click(function(){ $ ("img") .attr("width","500")7 }); 
7. index( 方 法 


index() 方 法 返回 指定 元 素 相 对 于 其 他 指定 元 素 的 index 位 置 。 

这 些 元 素 可 通过 jQuery 选择 器 或 DOM 元 素 指定 。 如 果 未 找到 元 素 ,index() 将 返 
回 一 1。 

语法 1: 获得 第 一 个 匹配 元 素 相 对 于 同 级 元 素 的 index。 

$ (selector) .index () 


例如 : 获得 被 单 击 的 一 li 元 素 相对 于 它 的 同 级 元 素 的 index。 


$("1i") .click(function(){ 
alert ($ (this) .index())7 
D); 


语法 2: 获得 元 素 相对 于 选择 器 的 index 位 置 。 
$ (selector) .index (element) 
例如 : 获得 被 单 击 的 div 的 序号 。 


$ ("div") .click(function (){ 

var n=$ ("div") .index (this); 

$ ("span" ) .html (n.toString())7 
D); 


8. addClass0 方 法 


addClass() 方法 向 被 选 元 素 添 加 一 个 或 多 个 类 名 。 

该 方法 不 会 移 除 已 存在 的 class 属性 , 仅 添加 一 个 或 多 个 类 名 到 class 属性 。 如 需 添 
加 多 个 类 ,请 使 用 空格 分 隔 类 名 。 

语法 : 

$ (selector) .addclass (classname, function (index,oldclass)) 

例如 : 向 第 一 个 二 p 二 元 素 添加 一 个 类 名 。 


$ ("button") .click(function(){ $("p:first") .addclass ("intro"); }); 
124 jQuery 对象 与 DOM 对象 


1. jQuery 对 象 
jQuery 对 象 就 是 通过 jQuery 包装 DOM 对 象 后 产生 的 对 象 。 


HTMLS+CSS3+JavaSeript 顺 旧 于 发 


jQuery 对 象 是 jQuery 独 有 的 。 如 果 一 个 对 象 是 jQuery 对 象 ,那么 它 就 可 以 使 用 
jQuery 里 的 方法 ,如 $(*#tab”). html();。 

jQuery 对 象 无 法 使 用 DOM 对 象 的 任何 方法 。 同 样 DOM 对 象 也 不 能 使 用 jQuery 
里 的 任何 方法 。 

建议 : 如 果 获取 的 是 jQuery 对 象 ,就 要 在 变量 前 面 加 上 $ 。 


var $variable= jQuery 对 象 
var variable= DOM 对 象 


2. jQuery 对 象 转换 成 DOM 对 象 


jQuery 对 象 不 能 使 用 DOM 中 的 方法 ,但 如 果 jQuery 没有 封装 想 要 的 方法 ,不 得 不 
使 用 DOM 方法 的 时 候 , 有 如 下 两 种 处 理 方法 。 
(1) jQuery 对 象 是 一 个 数组 对 象 ,可 以 通过 [index] 的 方法 得 到 对 应 的 DOM 对 象 。 


$ ("msg") [0] 
(2) 使 用 jQuery 中 的 get(index) 方 法 得 到 相应 的 DOM 对 象 。 
$ ("#msg") .get (0) 

以 下 几 种 写法 都 是 正确 的 。 


$("#msg") .html (); 

$("#msg") [0] .innerHTML7 
$("#msg") .eq(0) [0] .innerHTML7 
$ ("#msg") .get (0) .innerHTML; 


如 $C("#msg")[0j,$C"div").eq(1)[0],$C"div"). getO 〇 [1],$C("td")[5] 都 是 DOM 
对 象 ,可 以 使 用 DOM 中 的 方法 ,但 不 能 再 使 用 jQuery 的 方法 。 


3. DOM 对 象 转换 成 jQuery 对 象 


对 于 一 个 DOM 对 象 ,只 用 $(C) 把 DOM 对 象 包 装 起 来 ,就 可 以 获得 一 个 jQuery 对 
象 。 例 如 : 


$ (document .getElementById ("msg")) 


转换 后 就 可 以 使 用 jQuery 中 的 方法 了 。 
125 jQuery 事件 


12.5.1 常见 的 DOM 事件 


页 面 对 不 同 访问 者 的 响应 叫 作 事件 。 事 件 处 理 程序 指 的 是 当 HTML 中 发 生 某 些 事 
件 时 调用 的 方法 。 常 见 的 DOM 事件 见 表 12. 9。 


jp 
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表 12.9 常见 的 DOM 事件 














鼠标 事件 键盘 事件 表单 事件 文档 /窗口 事件 
click keypress submit load 
dblclick keydown change resize 
mouseenter keyup focus scroll 
mouseleave blur unload 











例如 : 定义 p 标签 的 单 击 事件 。 

$("p") .click()7 

事件 的 处 理 可 以 通过 一 个 事件 函数 实现 。 

$ ("Pp") .click (function() { alert ("动作 触发 后 执行 的 代码 !! "); }); 

1. click0 

当 单 击 元 素 时 ,会 发 生 click 事件 。 

click() 方 法 触发 click 事件 ,或 规定 当 发 生 click 事件 时 运行 的 函数 。 该 方法 在 用 户 
单 击 HTML 元 素 时 执行 。 

例如 : 当 单 击 事件 在 某 个 二 p 二 元 素 上 触发 时 ,隐藏 当前 的 二 p 二 元 素 。 

$("p") .click(function(){ $ (this) .hide(); })7 

2. dblclick0 

当 双 击 元 素 时 ,会 发 生 dblclick 事件 。 


dblclick() 方 法 触发 dblclick 事件 ,或 规定 当 发 生 dblclick 事件 时 运行 的 函数 。 
例如 : 当 双 击 事件 在 某 个 二 p 二 元 素 上 触发 时 ,隐藏 当 前 的 二 p 二 元 素 。 


$ ("Pp") .dblclick (function(){ $ (this) .hige (); }); 
3. Mouseenter) 


当 鼠 标 指针 进入 元 素 时 ,会 发 生 mouseenter 事件 。 
例如 : 
$ ("#p1") .mouseenter (function () { 


alert (' 您 的 鼠标 移 到 了 id= "pl" 的 元 素 上 !)7 
Ds; 


4. mouseleave() 


当 鼠 标 指针 离开 元 素 时 ,会 发 生 mouseleave 事件 。 
例如 : 
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$ ("#p1") .mouseleave (function (){ 
alert ("再 见 ,您 的 鼠标 离开 了 该 段落 。"); 
Ds 


5. mousedown0 

当 鼠 标 指针 移动 到 元 素 上 方 ,并 按 下 鼠标 按键 时 ,会 发 生 mousedown 事件 。 
例如 : 

$ ("#p1") .mousedown (function () { alert ("鼠标 在 该 段落 上 按 下 !"); }); 

6. mouseup0 

当 在 元 素 上 松 开 鼠 标 按钮 时 ,会 发 生 mouseup 事件 。 

例如 : 

$ ("#p1") .mouseup (function () { alert ("鼠标 在 段落 上 松 开 。"); }); 

7. hover0 


hover() 方 法 用 于 模拟 光标 悬 停 事件 。 

当 鼠 标 移动 到 元 素 上 时 ,会 触发 指定 的 第 一 个 函数 (mouseenter); 当 鼠标 移出 这 个 元 
素 时 ,会 触发 指定 的 第 二 个 函数 (mouseleave) 。 

例如 : 

$ ("#p1") .hover (function(){ alert ("你 进入 了 pl!"); }, 


function (){ alert ("拜拜 ! 现在 你 离开 了 pl!"); } 
); 


8. focus0 
当 元 素 获得 焦点 时 ,会 发 生 focus 事件 。 


当 单 击 选中 元 素 或 通过 tab 键 定位 到 元 素 时 ,该 元 素 就 会 获得 焦点 。 
例如 : 


$ ("input") .focus (function (){ 
$ (this) .css ("background- color","#Ccccccn")7 
Ds; 


9. blur 


当 元 素 失去 焦点 时 ,会 发 生 blur 事件 。 
例如 : 
$ ("input") .blur (function (){ 
$ (this) .css ("background- color™, "#ffffff"); 
D; 
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12.5.2 事件 绑 定 / 移 除 
1. on( 方 法 


on() 方 法 在 被 选 元 素 及 子 元 素 上 添加 一 个 或 多 个 事件 处 理 程序 。 

使 用 on() 方 法 添加 的 事件 处 理 程序 适用 于 当前 及 未 来 的 元 素 ( 如 由 脚本 创建 的 新 元 
素 )。 如 需 移 除 事件 处 理 程序 ,请 使 用 off() 方 法 。 如 需 添 加 只 运行 一 次 的 事件 然后 移 除 ， 
请 使 用 on() 方 法 。on() 方 法 参数 说 明 见 表 12. 10。 

语法 : 

$ (selector) .on (event, childSelector, data, function) 


表 12.10 on() 方 法 参数 说 明 





参数 描述 
ee 必需 。 规 定 要 从 被 选 元 素 移 除 的 一 个 或 多 个 事件 或 命名 空间 。 
由 空格 分 隔 多 个 事件 值 ,也 可 以 是 数组 。 必 须 是 有 效 的 事件 





可 选 。 规 定 只 能 添加 到 指定 的 子 元 素 上 的 事件 处 理 程序 ( 且 不 是 选择 器 本 
身 , 如 已 废弃 的 delegate() 方 法 ) 


data 可 选 。 规 定 传递 到 函数 的 额外 数据 
function 可 选 。 规 定 当 事件 发 生 时 运行 的 函数 


childSelector 











例如 : 向 过 p 之 元 素 添 加 click 事件 处 理 程序 。 


$ (document) .ready (function (){ 
$ ("p") .on ("click", function() { alert ("段落 被 单 击 了 。"); }); 
Ds; 


2. off0 方 法 


off() 方 法 通常 用 于 移 除 通过 on() 方 法 添加 的 事件 处 理 程序 。 

如 需 移 除 指定 的 事件 处 理 程序 , 当 事 件 处 理 程序 被 添加 时 ,选择 器 字符 串 必须 匹配 
on() 方 法 传递 的 参数 。off() 方 法 参数 说 明 见 表 12. 11。 

语法 : 

$ (selector) .off (event, selector, function (eventObj) ,map) 


表 12.11 off() 方 法 参数 说 明 








参 数 描 述 
人 必需 。 规 定 要 从 被 选 元 素 移 除 的 一 个 或 多 个 事件 或 命名 空间 。 
由 空格 分 隔 多 个 事件 值 。 必 须 是 有 效 的 事件 
selector 可 选 。 规 定 添加 事件 处 理 程序 时 最 初 传递 给 on() 方 法 的 选择 器 





function(eventObj) ”| 可 选 。 规 定 当 事 件 发 生 时 运行 的 函数 
规定 事件 映射 ({event:function,event:function,...)) ,包含 要 添加 到 元 素 的 一 
下 个 或 多 个 事件 ,以 及 当 事 件 发 生 时 运行 的 函数 
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例如 , 移 除 所 有 二 p 二 元 素 上 的 click 事件 。 


$ ("button") .click(function(){ 
SOEECEUCK)R 
Ds; 


3. bind0 方 法 


bind() 方 法 向 被 选 元 素 添 加 一 个 或 多 个 事件 处 理 程序 ,以 及 当 事 件 发 生 时 运行 的 函 
数 。 自 jQuery 版 本 1.7 起 ,on() 方 法 是 向 被 选 元 素 添 加 事件 处 理 程序 的 首选 方法 。 
语法 : 


$ (selector) .bind (event, data, function,map) 


event: 必需 。 规 定 添 加 到 元 素 的 一 个 或 多 个 事件 。 巾 空格 分 隔 多 个 事件 值 ,必须 是 
有 效 的 事件 。 

data: 可 选 。 规 定 传递 到 函数 的 额外 数据 。 

function: 必需 。 规 定 当 事件 发 生 时 运行 的 函数 。 

map: 规定 事件 映射 C({event:function,event:function,…)) ,包含 要 添加 到 元 素 的 一 
个 或 多 个 事件 ,以 及 当 事 件 发 生 时 运行 的 函数 。 

例如 ,向 二 p 二 元 素 添 加 一 个 单 击 事件 。 


$("p") .bind ("click", function () { 
alert ("这 个 段落 被 单 击 了 。"); 
D; 


例如 ,向 元 素 添加 多 个 事件 。 


$ (document) .ready (function(){ 
$ ("Pp") .bind ("mouseover mouseout", function() { 
$ ("p") .toggleClass ("intro"); 
D; 
ys 


4. unbind( 方 法 


unbind() 方 法 移 除 被 选 元 素 的 事件 处 理 程序 。 该 方法 能 够 移 除 所 有 的 或 被 选 的 事件 
处 理 程序 ,或 者 当 事 件 发 生 时 终止 指定 函数 的 运行 。 

该 方法 也 可 以 通过 event 对 象 取消 绑 定 的 事件 处 理 程序 。 该 方法 也 用 于 对 自身 内 部 
的 事件 取消 绑 定 (如 当 事 件 已 被 触发 一 定 次 数 之 后 ,删除 事件 处 理 程序 )。 

如 果 未 规定 参数 , 则 unbindO 〇 方法 会 删除 指定 元 素 的 所 有 事件 处 理 程序 。unbind() 
方法 适用 于 任意 由 jQuery 添加 的 事件 处 理 程序 。 

自 jQuery 1.7 起 ,on() 和 off() 方 法 是 在 元 素 上 添加 和 移 除 事件 处 理 程序 的 首选 
放流 
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语法 : 
$ (selector) .unbind (event, function,eventObj) 
例如 , 移 除 所 有 二 p 二 元 素 的 事件 处 理 程序 。 


$ ("button") .click (function(){ 
$("p") .unbind (); 
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12.6.1 隐藏 和 显示 


hide() 方 法 隐藏 被 选 元 素 。 这 与 CSS 属性 display:none 类 似 。 隐 藏 的 元 素 不 会 被 完 
全 显示 (不 再 影响 页 面 的 布局 ) 。 
语法 : 


$ (selector) .hide (speed, easing, callback) 


show() 方 法 显示 隐藏 的 被 选 元 素 。show () 适 用 于 通过 jQuery 方法 和 CSS 中 
display:none 隐藏 的 元 素 ( 不 适用 于 通过 visibility:hidden 隐藏 的 元 素 ) 。 
语法 : 


$ (selector) .show (speed, easing, callback) 


speed: 速度 。 可 能 的 值 有 毫秒 .slow ,fast。 

easing: 规定 在 动画 的 不 同 点 上 元 素 的 速度 ,默认 值 为 "swing"。 可 能 的 值 有 swing 
和 linear。 

。 swing: 在 开头 /结尾 移动 慢 , 在 中 间 移 动 快 。 

。 linear: 匀速 移动 。 

callback :回调 函数 。 

例如 ,隐藏 所 有 二 p 二 元 素 。 


$ ("button") .click (function(){ 
$("p") .hide (); 
Ds; 


例如 ,规定 隐藏 效果 的 速度 。 


$ (document) .ready (function (){ 
$(".btn1") .click(function (){ 
$("p") .hide (1000); 
Ds; 
$(".btn2") .click (function (){ 
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$ ("Pp") .show (1000); 
D; 
nD; 


例如 ,hide() 方 法 , 先 执行 隐藏 ,后 执行 callback 函数 ,弹出 警告 窗口 。 


$ (document) .ready (function (){ 
$(".btn1") .click (function() { 
$ ("p") .hide (1000, function () { 
alert ("Hide() 方 法 已 完成 !"); 
Ds; 
D; 
$(".btn2") .click (function (){ 
$ ("p") .show (1000, function () { 
alert ("show() 方 法 已 完成 1"); 


12.6.2 淡 和 人 和 淡出 


fadeln( ) 方 法 逐渐 改变 被 选 元 素 的 不 透明 度 , 从 隐藏 到 可 见 ( 褪 色 效果 )。 隐 藏 的 元 
素 不 会 被 完全 显示 (不 再 影响 页 面 的 布局 ) 。 该 方法 通常 与 fadeOut( ) 方 法 一 起 使 用 。 

语法 : 

$ (selector) .fadeIn (speed,easing, callback) 

例如 ,使 用 淡 入 效果 显示 所 有 二 p 二 元 素 。 

$ ("button") .click(function(){ $("p") .fadeIn(); }); 


fadeOut() 方 法 逐渐 改变 被 选 元 素 的 不 透明 度 , 从 可 见 到 隐藏 (褪色 效果 )。 隐 藏 的 元 
素 不 会 被 完全 显示 (不 再 影响 页 面 的 布局 ) 。 
语法 : 


$ (selector) .fadeOut (speed,easing,callback) 

例如 ,使 用 淡出 效果 显示 所 有 一 p 二 元 素 。 

$ ("button") .click (function(){ $("p") .fadeout (); ])7 
12.6.3 animate 动画 


jQuery animate() 方 法 用 于 创建 自 定义 动画 。 
语法 : 


$ (selector) .animate ({params}, speed, callback); 
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必需 的 params 参数 用 于 定义 形成 动画 的 CSS 属性 。 
可 选 的 speed 参数 用 于 规定 效果 的 时 长 。 
可 选 的 callback 参数 是 动画 完成 后 执行 的 函数 名 称 。 

;下面 的 动画 把 二 div 二 元素 往 右边 移动 了 250 像素 。 


例如 


它 的 取 值 为 slow 、fast 或 毫秒 。 


$ ("button") .click(function(){ $ ("div") .animate ({left:'250px"'}); }); 


,生成 动画 的 过 程 中 可 同时 使 用 多 个 属性 。 


例如 


$ ("button") .click(function() { $("div").animate ({ left:"'250px', opacity:'0.5', height:" 
150px"', width:"'150px" }); 1); 


例如 ， 


定义 相对 值 ,需要 在 值 的 前 面 加 上 十 一 或 一 一 。 


$ ("button") .click(function(){ $ ("div") .animate ({ left:'250px', height:'+=150px', width:" 
+=150px" }); 1); 


,把 属性 的 动画 值 设 置 为 show hide 或 toggle。 


例如 


$ ("button") .click(function(){ $ ("div") .animate ({ height:'toggle' }); }); 





例如 
后 逐一 


,编写 多 个 animate() 调 用 ,jQuery 
运行 这 些 animate 调用 。 


$ ("button") .click (function(){ 
var div=$ ("div"); 
div.animate ({height:"'300px',opacity:'0.4'},"slow"); 


会 创建 包含 这 些 方 法 调用 的 “内 部 ”队列 , 然 


div.animate ({width:"'300px',opacity:'0.8'},"slow"); 
div.animate ({height:"'100px',opacity:'0.4'},"slow"); 
div.animate ({width:"'100px',opacity:'0.8'},"slow"); 


Ds; 


12.7.1 


项 目 说 明 


127 咖啡 商城 一 一 图 片 轮 播 


使 用 jQuery 编程 实现 咖啡 商城 首页 的 广告 栏 图 片 轮 播 效果 ,如 图 12. 2 所 示 。 
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图 12.2 图 片 轮 播 


HTMLS+CSS3+JavaSeript 项 肯 (开发 


12.7.2 项 目 设计 


(1) 图 片 的 隐藏 和 显示 ,可 以 使 用 hide() \fadeIn() 方 法 。 
(2) 动画 效果 的 循环 播放 ,可 以 通过 函数 自 调用 实现 。 
(3) 图 片 轮 播 的 算法 实现 过 程 如 下 。 

。 循环 开始 ,把 3 幅 图 一 起 隐藏 。 

。 让 当前 index 指向 的 图 片 淡出 。 

。 改写 index 的 值 。 

。 等 待 2000ms, 函 数 自 调用 ,开始 下 一 轮 循环 。 


12.7.3 项目 实施 
实现 代码 如 下 所 示 。 


< !DOCTYPE HTML> 
<HIML> 
< HEAD> 
< TITLE> New Document< /TITLE> 
< SCRIPT type= "text/javascript" src= "jquery.js"> 
< /SCRIPT> 
< SCRIPT type= "text/javascript"> 
Var index=0; 
Var timer=""; 


$ (function(){ showing(index); }) 


function showing (index){ 
$ ("#banner 1i") .hide(); 
$ ("#banner li:eq("+ index+ ")") .fadeIn ("slow"); 
index= index+ 1>2? 0:index+ 1; // 一 共 3 幅 图 
timer= setTimeout ("showing ("+ index+ ")", 2000); 
. 
< /SCRIPT> 
<style>1i{list- style:none;width:500px}< /style> 
< /HEAD> 
<BODY> 
<UL id= "banner"> 
<l1i><A HREF=""> <img src= "image/bannerl.jpg"></A></1i> 
<l1i><A HREF=""> <img src= "image/banner2.jpg"></A></1i> 
<1li><A HREF=""> <img src="image/banner3.jpg"></A></li> 
</VUL> 
< /BODY> 
< /HIML> 
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128 JSON 


JS 对 象 简谱 (JavaScript Object Notation,JSON) 是 一 种 轻 量 级 的 数据 交换 格式 。 它 
基于 ECMAScript 的 一 个 子 集 , 采 用 完全 独立 于 编程 语言 的 文本 格式 存储 和 表示 数据 。 
简洁 和 清晰 的 层次 结构 使 得 JSON 成 为 理想 的 数据 交换 语言 ,易于 人 阅读 和 编写 ,同时 也 
易于 机 器 解析 和 生成 ,并 可 有 效 地 提升 网 络 的 传输 效率 。 


12.8.1 JSON 语法 规则 


在 JavaScript 语言 中 ,一 切 都 是 对 象 。 因 此 ,任何 支持 的 类 型 都 可 以 通过 JSON 表 
示 , 如 字符 串 数字、 对 象 . 数 组 等 。 但 是 ,对 象 和 数组 是 比较 特殊 且 常 用 的 两 种 类 型 。 

。 对 象 表示 为 键 / 值 对 。 

"数据 由 逗号 分 隔 。 

。 花 括号 保存 对 象 。 

。 方 括号 保存 数组 。 


1.JSON 键 / 值 对 


JSON 键 / 值 对 是 用 来 保存 JavaScript 对 象 的 一 种 方式 ,和 JS 对 象 的 写法 大 同 小 异 。 
键 / 值 对 组 合 中 的 键 名 写 在 前 面 并 用 双 引 号 "" 包 庄 ,使 用 冒号 :分隔 ,然后 紧 接着 值 。 





{"firstName": "Json"} 
等 价 于 下 列 的 JavaScript 语句 : 
{firstName : "Json"} 


键 / 值 对 的 值 可 以 是 : 
数字 (整数 或 浮 点 数 ) 
字符 串 ( 在 双 引 号 中 ) 
逻辑 值 (true 或 false) 
数组 (在 方 括号 中 ) 
对 象 ( 在 花 括号 中 ) 


null 





2. JSON 与 JavaScript 对 象 的 关系 


JSON 是 JavaScript 对 象 的 字符 串 表 示 法 , 它 使 用 文本 表示 一 个 JavaScript 对 象 的 信 
息 ,本 质 上 是 一 个 字符 串 。 


如 : 
var cbj= {a: 'Hello', b: 'World'}; // 这 是 一 个 对 象 ,注意 , 键 名 也 可 以 使 用 引号 包 庄 
Var json= '{"a": "Hello", "b": "World"}"; // 这 是 一 个 usoN 字 符 串 ,本 质 上 是 一 个 字符 串 
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3. JSON 和 JavaScript 对 象 互相 转换 

要 实现 从 对 象 转换 为 JSON 字符 串 ,使 用 JSON. stringify() 方 法 。 

var json=JSON.stringify({a: 'Hello', b: 'World'}); // 结 果 是 '{"a": "Hello", "b": "World"}' 
要 实现 从 JSON 转换 为 对 象 ,使 用 JSON. parse() 方 法 。 


var obj=JSON.parse('{"a": "Hello", "b": "World"}"'); // 结 果 是 {a: 'Hello', b: 'World'} 


12.8.2 常用 类 型 


对 象 : 对 象 在 JavaScript 中 是 使 用 花 括号 (} 包 庄 起 来 的 内 容 ,数据 结构 为 {keyl: 
valuel,key2: value2,...} 的 键 / 值 对 结构 。 在 面向 对 象 的 语言 中 , key 为 对 象 的 属性 ， 
value 为 对 应 的 值 。 键 名 可 以 使 用 整数 和 字符 串 表示 。 值 的 类 型 可 以 是 任意 类 型 。 

数组 : 数组 在 JavaScript 中 是 方 括 号 [] 包 里 起 来 的 内 容 , 数 据 结构 为 ["java","javascript"， 
"vb" ,…] 的 索引 结构 。 在 JavaScript 中 ,数组 是 一 种 比较 特殊 的 数据 类 型 , 它 也 可 以 像 对 
象 那 样 使 用 键 / 值 对 ,但 还 是 索引 使 用 得 多 。 同 样 , 值 的 类 型 可 以 是 任意 类 型 。 


12. 8.3 基础 示例 


简单 地 说 ,JSON 可 以 将 JavaScript 对 象 中 表示 的 一 组 数据 转换 为 字符 串 ,然后 就 可 
以 在 网 络 或 者 程序 之 间 轻 松 地 传递 这 个 字符 串 ,并 在 需要 的 时 候 将 它 还 原 为 各 编程 语言 
支持 的 数据 格式 。 例 如 ,在 PHP 中 ,可 以 将 JSON 还 原 为 数组 或 者 一 个 基本 对 象 。 用 到 
Ajax 时 ,如 果 需 要 用 到 数组 传 值 ,这 时 就 要 用 JSON 将 数组 转换 为 字符 串 。 


1. 值 是 字符 囊 
JSON 最 常用 的 格式 是 对 象 的 键 / 值 对 。 例 如 : 
{"firstName":"Brett", "lastName":"McLaughlin"} 
2. 值 是 数组 
和 普通 的 JavaScript 数组 一 样 ,JSON 也 是 使 用 方 括号 [表示 数组 。 
{ 

"people":[ 

| 


"firstName":"Brett", 
"lastName":"McLaughlin" 


"firstName":"Jason", 
"lastName":"Hunter™ 
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这 不 难 理解 。 在 这 个 示例 中 ,只 有 一 个 名 为 people 的 键 , 值 是 一 个 数组 ,数组 元 素 是 
对 象 , 每 个 对 象 是 一 个 人 的 记录 ,其 中 包含 名 和 姓 。 上 面 的 示例 演示 如 何 用 数组 将 对 象 组 
合成 一 个 值 。 当 然 , 可 以 使 用 相同 的 语法 表示 更 复杂 的 值 (数组 -对 象 -数组 的 多 次 嵌 套 ) 。 


129 Aiax 


Ajax 即 Asynchronous Javascript And XML (异步 JavaScript 和 XML ) ,是 指 一 种 创 
建交 互 式 网 页 应 用 的 网 页 开发 技术 。 

Ajax 一 异步 JavaScript 和 XML( 标 准 通用 标记 语言 的 子 集 ) 。 

Ajax 是 一 种 用 于 创建 快速 动态 网 页 的 技术 。 

Ajax 是 一 种 在 无 须 重新 加 载 整个 网 页 的 情况 下 ,能 够 更 新 部 分 网 页 的 技术 。 

通过 在 后 台 与 服务 器 进行 少量 数据 交换 ,Ajax 可 以 使 网 页 实现 异步 更 新 。 这 意味 着 
可 以 在 不 重新 加 载 整个 网 页 的 情况 下 ,对 网 页 的 某 部 分 进行 更 新 。 

传统 的 网 页 (不 使 用 Ajax) 如 果 需 要 更 新 内 容 , 必 须 重 载 整个 网 页 页 面 。 


12.9.1 Ajax 如 何 工 作 


1. 建立 xmlHttpRequest 对 象 


Var xmlhttp; 

if (window.XMLHttpRequest) { 

// 适 用 于 IE7+ 、Firefox、Chrome、Opera、Safari 
xmlhttp= new XMLHttpRequest (); 

} 

else { ”适用 于 IE6、IE5 

xmlhttp= new ActiveXxObject ("Microsoft .XMLHTTP"); 
} 


XMLHttpRequest 用 于 在 后 台 与 服务 器 交换 数据 。 这 意味 着 可 以 在 不 重新 加 载 整 
个 网 页 的 情况 下 ,对 网 页 的 某 部 分 进行 更 新 。 

为 了 应 对 所 有 的 现代 浏览 器 ,包括 IE5 和 IE6, 请 检查 浏览 器 是 否 支 持 
XMLHttpRequest 对 象 。 如 果 支 持 , 则 创建 XMLHttpRequest 对 象 。 如 果 不 支持 , 则 创 
建 ActiveXObject 。 


2. 使 用 OPEN 方法 与 服务 器 建立 连接 


open (method, url,async) 


规定 请 求 的 类 型 .URL 以 及 是 否 异步 处 理 请 求 。 
method: 请 求 的 类 型 ;GET 或 POST。 

url: 文件 在 服务 器 上 的 位 置 。 

async: true( 异 步 ) 或 false( 同 步 ) 。 
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例如 : 

xmlHttp.open ("get", "ajax?name= "+ name, true) 

此 步 注意 设置 http 的 请 求 方式 (POST/GET) ,如 果 是 POST 方式 , 则 注意 设置 请 求 
头 信息 。 

xmlHttp. setRequestHeader ("Content— Type", "application/x- www- form urlencoded") 

3. 向 服务 器 端 发 送 数 据 

如 果 是 GET 方式 : 

xmlHttp.send(); 

如 果 是 POST 方式 ,可 以 将 希望 发 送 的 数据 写 在 括号 中 。 

xmlhttp.send ("fname=Billg&lname=Gates"); 

4. 在 回调 函数 中 针对 不 同 的 响应 状态 进行 处 理 


在 onreadystatechange 事件 中 ,规定 当 服 务 器 响应 已 做 好 被 处 理 的 准备 时 所 执行 的 
任务 。 
当 readyState 等 于 4 且 状 态 为 200 时 ,表示 响应 已 就 绪 。 


xmlhttp.onreadystatechange= function () 
人 
if (xmlhttp.readyState==4 && xmlhttp.status==200) 
{ 
document .getElementById ("myDiv") .innerHTMI= xmlhttp.responseText; 
3 
3 


下 面 是 XMLHttpRequest 对 象 的 3 个 重要 属性 , 见 表 12. 12。 
表 12.12 XMLHttpRequest 对 象 的 3 个 重要 属性 
属 性 描 述 





onreadystatechange 存储 函数 (或 函数 名 ) , 当 readyState 属性 改变 时 ,就 调用 该 函数 





存 有 XMLHttpRequest 的 状态 。 从 0 到 4 发 生变 化 
0: 请 求 未 初始 化 
i 1: 服务 器 连接 已 建立 
2: 请 求 已 接收 
3: 请 求 处 理 中 
4: 请 求 已 完成 , 且 响 应 已 就 绪 





200: "OK" 
404: 未 找到 页 面 


status 
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5. 获得 响应 数据 


如 需 获得 来 自 服务 器 的 响应 , 则 使 用 XMLHttpRequest 对 象 的 responseText 或 
responseXML 属性 。 

responseText 获得 字符 串 形式 的 响应 数据 。 

responseXML 获得 XML 形式 的 响应 数据 。 





document .getElementById ("myDiv") .innerHTMI= xmlhttp.responseText; 


12.9.2 jQuery 中 的 Ajax 


使 用 jQuery 封装 的 ajax() 方 法 ,可 以 简单 地 实现 上 述 的 所 有 过 程 。 jQuery 中 的 
Ajax 有 4 种 常用 请 求 方式 : $. get() 、$. post() 、$. ajax()、$. getJSON() 。 

$. ajax 是 jQuery 底层 Ajax 实现 ,是 一 种 通用 的 底层 封装 。$. ajax() 请 求 数据 之 后 ， 
需要 使 用 回调 函数 ,这 些 函 数 包括 beforeSend、error、dataFilter、success、complete 等 。 

$. get $. post 是 简单 易 用 的 高 层 实现 ,我 们 使 用 $. get $. post 方法 ,jQuery 会 自动 封 
装 调用 底层 的 $. ajax。 

$. get 只 处 理 简单 的 GET 请 求 功能 ,以 取代 复杂 $. ajax, 请 求 成 功 时 可 调用 回调 函 
数 。 不 支持 出 错时 执行 函数 ,否则 必须 使 用 $. ajax。 

$. post 只 处 理 POST 请 求 功 能 ,以 取代 复杂 $. ajax。 请 求 成 功 时 可 调用 回调 函数 。 
不 支持 出 错时 执行 函数 ,否则 必须 使 用 $. ajax。 

语法 : 

$.get ("test.php", { name: "John", time: "2pm" }) 


$. get 方法 在 请 求 时 会 自动 生成 queryString 提交 给 服务 器 (name 王 John&time 一 
2pm) ,$. post 方法 提交 的 数据 直接 类 似 表单 提交 ,提交 的 数据 量 比 $. get 更 大 。 

最 简单 的 情况 下 ,$. ajax() 可 以 不 带 任何 参数 直接 使 用 。 

例如 


$.ajax({ 

url : 'http://193.161.24.5/data/infoList.json', 

type : "POST", 

data : {}, 

dataType : "json", 

error : function() {}, 

success : function (data) {$("#info") .html (data.name);} 
Ds; 


url: 请 求 的 地 址 。 

type: 请 求 的 方式 ,可 以 是 GET 或 POST。 
data: 随 请 求 一 起 发 送 的 数据 ,没有 数据 时 为 {} 。 
dataType: 希 望 服务 器 返回 的 数据 类 型 。 
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error :请求 出 错 后 的 回调 函数 。 
success: 请 求 成 功 后 的 回调 函数 。 

$. get() 方法 使 用 HTTP GET 请 求 从 服务 器 加 载 数 据 。 
语法 : 

$ .get (URL, data, function (data status, xhr) ,dataType) 


$. post() 方 法 使 用 HTTP POST 请 求 从 服务 器 加 载 数据 。 
语法 : 
$ (selector) .post (URL, data, function (data, status, xhr) ,dataType) 


URL: 必需 。 规 定 需 要 请 求 的 URL。 

data: 可 选 。 规 定 连 同 请 求 发 送 到 服务 器 的 数据 。 

function(data,status,xhr): 可 选 。 规 定 当 请 求 成 功 时 运行 的 函数 。 其 中 的 参数 有 
。 data: 包含 来 自 请 求 的 结果 数据 。 

。 status: 包含 请 求 的 状态 ("success"、"notmodified"、"error"、"timeout"、"parsererror")。 

。 xhr: 包含 XMLHttpRequest 对 象 。 

dataType: 可 选 。 规 定 预期 的 服务 器 响应 的 数据 类 型 。 上 默认 地 ,jQuery 会 智能 判断 。 
例如 ,发 送 一 个 HTTP GET 请 求 到 页 面 并 取 回 结果 。 


$ ("button") .click (function(){ 
$.get ("demo test.html", function (data, status) { 
alert ("Data: "+ data+ "nStatus: "+status); 
ys 
Ds; 


例如 ,使 用 $. post() 连 同 请 求 一 起 发 送 数据 。 


$ ("button") .click (function(){ 
$.post ("/try/ajax/demo test post.php", { name:" 商 品 ", num:3 }， 
function (data, status) { alert (" 数 据 : \n"+ data+ "\n 状态 : "+status); 
Ds; 

D; 


$. getJSONQO 〇 方法 通过 HTTP GET 请 求 载 入 JSON 数据 。 
语法 : 
$.getJSON (url, data, success (data, status, xhr)) 


例如 : 


$ (document) .ready (function (){ 
$ ("button") .click(function (){ 
$.getJSON ("demo ajax _ json.js",function (result){ 
$.each (result, function(i, field){ 
$ ("div") .append (field+ " "); 
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1210 咖啡 商城 一 一 查看 商品 详情 


12.10.1 项 目 说 明 

咖啡 商城 的 首页 中 有 商品 浏览 版 块 ,如 图 12. 3 所 示 , 单 击 其 中 的 某 个 商品 , 则 跳 转 到 
该 商品 的 详情 页 面 ,如 图 12. 4 所 示 。 虽 然 每 个 商品 都 对 应 不 同 的 详情 ,但 是 ,只 要 制作 一 
个 商品 详情 页 面 , 再 根据 用 户 选择 的 不 同 商品 ,在 网 页 上 更 新 该 商品 的 数据 即 可 。 这 些 数 
据 包括 商品 的 图 片 名称、 价格 .描述 等 。 这 种 动态 的 数据 更 新 ,通常 使 用 Ajax 实现 。 








Se 
¥63.00 ¥29.99 ¥9.99 
已 入 出 24212 件 已 售 出 18619 件 已 篇 出 14321 件 








图 12.3 商品 浏览 





新 加 坡 OWL 手头 底 二 合 一 速 浓 加 啡 扮 45 条 900g 新 藏 外 包 邮 


【 1009% 越 南 TRUNG NGUYEN 原装 进口 中 原 G7 咖 啡 3 【购买 包 邮 商品 
+ 其 它 商品 ， 享受 一 起 包 邮 ,谢谢 ! ] 总 销量 〔 突 破 360，089 包 ) 本 品 
收藏 (56，900 人 ) 4.8 分 评分 ， 累 计 评 价 【169，086 人 ) 好 评 95% 以 
上 # 价格 绝对 亲民 ; 元 芳 ! 你 怎么 看 ， 有 不 选 的 理由 吗 ? 内 含 50 包 ! 

【 10096 越 南 TRUNG NGUYEN 原装 进口 中 原 G7 咖 啡 ] 正品 保证 ! 
店 浦 公告 本 店 默 认 邮 政 小 包 /天 天 快递 ， 本 店 只 接受 换 发 申通 快递 、 顺 
丰 快 递 ， 请 联系 客服 补 上 邮 责 差价 ， 允 谢 合作 ! 备注 :全 国 包 邮 商 品 不 仿 


港 痪 台地 区 。 








Y32.99 GE 


一 口 价 ¥-46-90 29.317/500g 
广东 深圳 至 大 连 快递 : 0.00 














图 12.4 商品 详情 











12.10.2 项 目 设计 
(1) 在 “商城 首页 . html” 中 ,对 每 个 商品 的 图 片 都 建立 超 链接 , 单 击 图 片 就 会 跳 转 到 
“商品 详情 . html” 页 面 ,同时 带 有 参数 productId 作为 商品 编号 。 
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<a href=" 商 品 详情 .html? productId=g78" target=" blank"> 
< img src= "img/home/tacbao/1.jpg -webp" align= "absmiddle"> 
过 


(2) 在 “商品 详情 . html” 页 面 ,通过 地 址 栏 信息 获取 参数 productId 的 值 。 


| @ 127.0.0.1:81/coffee/ 商 品 详情 .html?productld=g78 


Var loc=window.location.href7 





Var n= loc.indexOf ("="); 

Var productId= loc.substr (n+ 1); 

(3) 通过 商品 编号 productId, 从 本 地 文件 中 读 取 商品 数据 。 在 本 项 目 中 ,每 个 商品 
的 数据 都 被 保存 在 文本 文件 中 ,文件 以 商品 编号 命名 ,如 图 12.5 所 示 。 文 件 中 的 数据 以 
JSON 格式 存储 。 


{ 
"gname"; “【 热 销 36 万 特价 全 国 包 邮 】 越 南 原装 进口 3 合 1 中 原 g7 速 溶血 啡 8888g"， 
sid. “gr7 sy 
"price ”353359925 
"pic"; "1.jpg” 
} 

















图 12.5 JSON 文 件 


(4) 当 “ 商 品 详情 . html” 页 面 加 载 时 ,执行 ajax 方法 ,异步 请 求 数据 ,并 显示 在 页 
面 上 。 
(5) 由 于 使 用 了 jQuery, 在 “商品 详情 . html” 页 面 应 该 引入 jQuery 的 库 文件 。 





<script type= "text/javascript" src="js/jquery.min.js" 
charset= "utf- 8">< /script> 


12.10.3 项 目 实施 
加 载 商品 信息 的 ajax() 方 法 实现 代码 如 下 。 


function loadGoods (param) { 
$.ajax({ 
url: 'data/'+paramt ' -txt' 
type: "get", 
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data: {}, 
dataType: "json", 
error: function() { 
alert ("json 读 取 失 败 "); 
}, 


success: function(data) { 


jQuery 过 柄 


document .getElementById ("gname") .innerHTML= data.gname; 


document .getElementById ("price") .innerHTMI= '¥ '+data.price; 


document .getElementById ("gid") .value= data.gid; 


document .getElementById ("first img") .src="img/detail/"+data.pic; 


Var c= document .getElementById ("canvas1"); 


Var ctx=c.getContext ("2d"); 


ctx.clearRect (0, 0, c.width, c.height); ”// 擦 除 画 布 中 的 原 图 像 


var img=new Image()7 
jimg.src= "img/detail/"+ data.pic; 


img.onload= function (){ // 绘 制 商品 源 
ctx.drawImage (first img, 0, 0, c.width, c.height); 


Ds; 


习 题 


oo ¢ ) 不 是 jQuery 的 选择 器 。 


D. onclick() 


D. attr(name) 


D. contents() 


A. 基本 选择 器 B. 层次 选择 器 
C. CSS 选择 器 D. 表单 选择 器 
.( ，) 不 是 jQuery 对 象 访问 的 方法 。 
A. each() B. size() C. .length 
. 如果 需 要 匹配 包含 文本 的 元 素 , 则 用 ( ) 实 现 。 
A. text() B. contains() C. input() 
. 如 果 想 找到 一 个 表格 的 指定 行 数 的 元 素 , 用 ( ) 方 法 可 以 快速 找到 指定 元 素 。 
A. text() B. get() C. eq() 
. 在 jQuery 中 , 想 给 第 一 个 指定 的 元 素 添加 样式 ,选项 ( ) 是 正确 的 。 
A. first B. eq(1) 
C. css(name) D. css(name,value) 


. 在 jQuery 中 想 实现 通过 远程 httpget 请 求 载 人 信息 功能 的 是 ( 
A. $. ajax() B. load(url) 
C. $. get(url) D. $. getScript(url) 


)。 
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7. 选项 (  ) 能 隐藏 下 面 的 元 素 。 
<inputid- "id txt"name= "txt"type= "text"value= ""/> 
A. $C"id_txt"). hide(); B. $(#id_txt). remove(); 
C. $("#id_txt"). hide(); D. $C("#id_txt"). remove(); 
8. jQuery 的 方法 get() 用 于 ( hs 
A. 使 用 HTTP GET 请 求 从 服务 器 加 载 数 据 
B. 返回 一 个 对 象 
C. 返回 存在 jQuery 对 象 中 的 DOM 元 素 
D. 触发 一 个 get Ajax 请 求 
9. 在 jQuery 中 ， 


$('#hello') .css ("color", "#f£0000") 
$('#hello') .css ("color"") 


表示 的 含义 分 别 是 ( ) 和 ( Ws 
A. $(" 井 hello). css("color", #0000) 表 示 选 择 id 为 hello 的 元 素 , 并 设置 颜色 为 


"f0000" 
B. $('#hello). css("color"") 表 示 选 择 id 为 hello 的 元 素 , 并 且 取 到 该 元 素 字 体 
显示 的 颜色 
C. $$('# helloDcss(C"color""f0000" 表 示 选 择 CSS 类 为 hello 的 元 素 , 并 且 取 到 该 
元 素 字体 显示 的 颜色 
D. $Chello)css("color") 表 示 选 择 CSS 类 为 hello 的 元 素 , 并 且 取 到 该 元 素 字 体 
显示 的 颜色 
10. 在 jQuery 中 ,( ) 选 择 使 用 myClass 类 的 所 有 元 素 。 
A. $(".myClass") B. $("#myClass") 
©C. BE D. ${'body'’} 


11. 在 jQuery 中 指定 一 个 类 ,如 果 存 在 ,就 执行 删除 功能 ,如 果 不 存在 ,就 执行 添加 
功能 。( ) 是 可 以 直接 完成 该 功能 的 。 


A. removeClass() B. deleteClass() 
C. toggleClass(class) D. addClass() 
12. JQuery 中 ,属于 鼠标 事件 方法 的 选项 是 ( Pa 
A. onClick() B. mouseOver() C. onMouseOut() D. blur() 


13. 在 jQuery 中 ,关于 fadeIn() 方 法 正确 的 是 ( % 
A. 可 以 改变 元 素 的 高 度 
B. 可 以 逐渐 改变 被 选 元 素 的 不 透明 度 , 从 隐藏 到 可 见 (褪色 效果 ) 
C. 可 以 改变 元 素 的 宽度 
D. 与 fadeIn() 相 对 的 方法 是 fadeOn() 
14. 在 jQuery 中 ,通过 jQuery 对 象 . css() 可 实现 样式 控制 ,以 下 说 法 正确 的 是 
( ) 和 ( Ds 





15. 


16. 


I 


19, 


20. 


2 
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. Css() 方 法 会 去 除 原 有 样式 而 设置 新 样式 
正确 语法 : css(" 属 性 "," 值 ") 
.css() 方 法 不 会 去 除 原 有 样式 
. 正确 语法 : css(" 属 性 ") 
下 列 选项 中 ,( ) 不 属于 键盘 事件 。 
A. keydown B. keyup C. keypress D. ready 
以 下 jQuery 代码 运行 后 ,对 应 的 HTML 代码 变 为 ( Ws 
HTML 代码: <p> 你 好 < /p> 
jQuery 代码 : $ ("p") .append ("<b> 快 乐 编程 < /b> "); 
A. 二 p 二 你 好 二 /p 二 二 b 二 快乐 编程 二 /b 二 
B. 二 p 二 你 好 二 b 二 快乐 编程 二 /b 二 二 /p 二 
C. 二 b> 快乐 编程 二 /b 二 二 p 二 你 好 二 /p 二 
D. 二 p 二 二 b 二 快乐 编程 二 /b 二 你 好 二 /p 二 
下 列 选项 中 ,有 关 数 据 验证 的 说 法 ,正确 的 是 ( Ws 
A. 使 用 客户 端 验 证 可 以 减轻 服务 器 压力 
B. 客观 上 讲 , 使 用 客户 端 验证 也 会 受 限 于 客户 端的 浏览 器 设置 
C. 基于 JavaScript 的 验证 机 制 正 是 将 服务 器 的 验证 任务 转嫁 至 客户 端 ,有 助 于 
合理 使 用 资源 
D. 以 上 说 法 均 正确 


@ 


本 | 


.以 下 关于 jQuery 优点 的 说 法 ,错误 的 是 ( Ys 


A. jQuery 的 体积 较 小 ,压缩 以 后 ,大 约 只 有 100KB 

B. jQuery 封装 了 大 量 的 选择 器 .DOM 操作 、 事 件 处 理 ,使 用 起 来 比 JavaScript 
简单 得 多 

C. jQuery 的 浏览 器 兼容 很 好 ,能 兼容 所 有 的 浏览 器 

D. jQuery 易 扩 展 , 开 发 者 可 以 自己 编写 jQuery 的 扩展 插件 

在 jQuery 中 ,下 列 关于 DOM 操作 的 说 法 错误 的 是 ( 7) 和 (  )。 

A. $(CA). append(B) 表 示 将 A 追加 到 B 中 

B. $(A).appendTo(B) 表 示 把 A 追加 到 B 中 

C. $CA).after(B) 表 示 将 A 插入 到 B 以 后 

D. $(A). insertAfter(B) 表 示 将 A 插入 到 B 以 后 

( ) 函数 不 是 jQuery 内 置 的 与 Ajax 相关 的 函数 。 

A. $.ajax() B. $. get() C. $. post() D. $. each() 

选项 ( ) 不 能 正确 地 得 到 下 面 这 个 标签 。 


<input? id= "btnGo"type= "buttom"value= " 单 击 "class= "btn"> 


A. $("#btnGo") B. $(".btnGo") 
C. $e btn'y D. $C("input[type='button']") 
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22. 以 下 关于 jQuery 的 描述 ,错误 的 是 ( ”)。 
A. jQuery 是 一 个 JavaScript 函数 库 
B. jQuery 极 大 地 简化 了 JavaScript 编程 
C. jQuery 的 宗旨 是 writeless,domore 


D. jQuery 的 核心 功能 不 是 根据 选择 器 查找 HTML 元 素 , 然 后 对 这 些 元 素 执行 


相关 的 操作 
23. 在 jQuery 中 被 誉 为 工厂 函数 的 是 ( % 
A. ready() B. function() C0 D. next() 





跨 平台 移动 App 开发 


本 章 概 述 

通过 本 章 的 学 习 , 学 生 能 够 掌握 使 用 HTML JavaScript\CSS 开发 App 的 方法 ;学 会 
如 何 利 用 HBuilder 提供 的 项 目 模 板 和 打包 工具 ,快速 开发 出 适用 于 Android/iOS 手机 的 
App 程序 。 

学 习 重 点 与 难点 

重点 : 

(1) 运用 Hello mui 示例 模板 ,开发 UI 界面 控件 。 

(2) 运用 Hello H5 十 示例 模板 ,调用 手机 底层 功能 。 

难点 : 

(1) 读 懂 示例 程序 源 代码 。 

(2) 清楚 引入 库 文件 的 依赖 关系 。 

重点 及 难点 学 习 指 导 建 议 : 

。 HBuilder 提供 的 MUI 控件 和 API 调 用 接口 方法 几乎 可 以 满足 常见 的 项 目 需求 ， 

只 要 熟练 掌握 ,就 能 快速 开发 出 自己 的 App。 
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13.1 HTML5 Plus 规范 


HTML5 Plus 移动 App 简称 5 十 App, 是 一 种 基于 HTML、JavaScript、CSS 编写 的 
运行 于 手机 端的 App, 这 种 App 可 以 通过 扩展 的 JS API 任意 调用 手机 的 原生 能 力 , 实 现 
与 原生 App 同样 强大 的 功能 和 性 能 。 

通过 HTML5 开发 移动 App 时 ,会 发 现 HTML5 很 多 能 力 不 具 备 。 为 弥补 HTML5 
能 力 的 不 足 , 在 W3C 的 指导 下 成 立 了 www. html5plus. org 组 织 ,推出 HTML5 十 
规范 。 

HTML5 十 规范 是 一 个 开放 规范 ,允许 三 方 浏览 器 厂商 或 其 他 手机 runtime 制造 商 实 
现 。HTML5 十 扩展 了 JavaScript 对 象 plus ,使 得 JavaScript 可 以 调用 各 种 浏览 器 无 法 实 
现 或 实现 不 佳 的 系统 能 力 ,设备 能 力 如 摄像 头 、 陀 螺 仪 文件 系统 等 ,业务 能 力 如 上 传 下 
载 , 二 维 码 , 地 图 、 支 付 .语音 输入 、 消 息 推送 等 。 

HBuilder 的 手机 原生 能 力 调用 分 两 个 层面 。 

(1) 跨 手机 平台 的 能 力 调用 都 在 HTML5 十 规范 里 ,如 二 维 码 、 语 音 输入 ,使 用 plus. 
barcode 和 plus. speech。 编 写 一 次 ,可 路 平台 运行 。 

(2) Native. js 是 另 一 项 创新 技术 。 手 机 OS 的 原生 API 有 40 多 万 ,大 量 的 API 无 
法 被 HTML5 使 用 。Native. js 把 几 十 万 原生 API 封装 成 了 JavaScript 对 象 , 通过 
JavaScript 可 以 直接 调 iOS 和 Android 的 原生 API。 这 部 分 就 不 再 跨 平 台 , 写 法 分 别 是 
plus. ios 和 plus. android, 如 调 ios game center, 或 在 android 手机 桌面 创建 快捷 方式 。 

Native. js 的 用 法 示例 如 下 。 








Var obj=plus.android.import ("android.content.Intent"); 


将 一 个 原生 对 象 android. content. Intent 映射 为 JavaScript 对 象 obj ,然后 在 JavaScript 
里 操作 obj 对 象 的 方法 属性 就 可 以 了 。 


132 HIML5+ App 


使 用 HTML5 十 开发 的 移动 App 并 非 mobile web 页 面 。mobile web 的 文件 存放 在 
Web 服务 器 上 ,而 移动 App 的 文件 存放 在 手机 本 地 ,编写 移动 App 的 html\js、css 文件 
被 打包 到 ipa 或 apk 等 原生 安装 包 , 在 手机 客户 端 运行 。 

这 些 移动 App 里 的 某 些 页 面 也 可 以 继续 从 服务 器 端 以 网 页 方式 下 行 , 就 像 任何 原生 
应 用 (如 微 信 ) 都 可 以 内 咀 网 页 一 样 。 

所 以 ,mobile web 在 HBuilder 里 新 建 项 目 时 属于 web 项 目 。 不 要 放置 到 移动 App 
项 目下 。mobile web 项 目 也 不 能 真 机 联 调和 打包 。 

(1) 把 一 个 mobile web 项 目 打包 成 移动 App。 
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@ 在 HBuilder 里 新 建 一 个 Web 项 目 ,把 mobile web 代码 放 进 去 。 

@ 在 HBuilder 里 新 建 移动 App。 

@ 在 新 建 的 移动 App 下 找到 manifest. json, 将 其 中 的 入 口 页 面 配 置 为 mobile web 
的 网 络 地 址 。 

@ 发 行 打包 ,得 到 一 个 移动 App 的 安装 包 。 除 了 有 一 个 安装 包 和 桌面 上 有 一 个 快 
捷 方 式 外 ,与 浏览 器 的 体验 不 会 有 其 他 区 别 。 

@ 不 过 ,这 样 的 移动 App 体验 很 差 , 它 在 页 面 跳 转 时 会 像 浏览 器 那样 切换 并 且 白 
屏 , 它 完全 无 法 脱 线 使 用 ,没有 网 络 时 点 开 这 个 App 只 能 看 到 一 片 白板 。 这 样 的 App 在 
Apple 的 Appstore 审核 时 是 无 法 通过 的 ,其 他 大 的 安 卓 市 场 也 不 会 允许 发 行 。 

(2) 建立 正规 的 移动 App, 方 法 如 下 所 示 。 

@ 在 HBuilder 里 新 建 移动 App 项 目 。 

@ 在 移动 App 里 编写 HTML、JavaScript、CSS 文件 ,本 地 JavaScript 通过 Ajax 方 
式 请 求 服务 器 数据 ,通过 plus. net 对 象 避 开 路 域 限制 。 

@ 移动 App 里 的 JavaScript 可 以 通过 plus 对 象 调 用 手机 原生 能 力 。 

@ 编写 好 的 移动 App 点 打包 变 成 安装 包 , 这 才 是 一 个 体验 良好 的 、 可 上 线 的 移 
动 App。 

(3) 混合 型 移动 App。 这 里 的 混合 型 移动 App 并 非 是 原生 和 HTML5 的 hybrid 
App, 而 是 指 一 部 分 页 面 是 本 地 的 HTML, 通 过 Ajax 与 服务 器 交互 , 另 一 部 分 页 面 是 从 
服务 器 下 行 的 mobile web 页 面 。 其 过 程 如 下 。 

@ 分 别 新 建 一 个 Web 项 目 和 一 个 移动 App 项 目 。 

@ 在 移动 App 里 的 某 个 HTML 里 通过 超 链 接 访 问 mobile web 页 面 。 

@ 在 服务 器 下 行 的 mobile web 页 面 中 ,同样 可 以 通过 JavaScript 调用 本 地 HTML5 
Plus API 对 硬件 层 进行 访问 ,类 似 微 信 JS SDK。 


13.3 ”HelloMU| 示例 


HBuilder 开发 环境 提供 了 一 个 Hello mui 示例 程序 ,并 提供 了 用 户 界面 的 各 种 控件 
展示 ,可 以 作为 UI( 界 面 ) 的 参考 代码 和 开发 模板 。 通 常 , 可 以 先 创建 这 个 示例 ,运行 和 展 
示 其 控件 功能 ,然后 参照 其 中 的 代码 编写 自己 的 UI。 

创建 Hello mui 示例 程序 的 过 程 如 下 所 示 。 

(1) 选择 "文件 ”一 “新建 ”~ 移动 App”, 在 如 图 13. 1 所 示 的 对 话 框 中 填写 应 用 名 
称 , 选 择 模 板 Hello mui 示例 。 

(2) 项 目 结构 如 图 13. 2 所 示 。 其 中 ,index. html 默认 为 首页 。 
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器 十 创建 移动 App i Fe 口 区 型 








应 用 名 称 : HelloMUI 














位 置 : | FAHBuilderproject 浏览 . 











选择 模板 

空 模板 空 模板 只 包含 index.html| 一 个 文件 和 相关 目录 。 

mui 项 目 已 包含 mui 的 js、css、 字 体 资源 的 项 目 模板 

mui 登 录 模板 带 登 录 和 设置 的 MUI 模 板 项 目 

Hello H5+ HTML5plus 规 范 的 演示 ,包括 季 像 头等 各 种 底层 能 力 的 调用 
回 Hello mui mu 前 苇 框 架 各 种 UI 控 件 ( 如 按钮 ) 的 展示 





























EL 十 | 











语法 
Javascript 版 本 : |ECMAScript 5.1 v 














HTML5+ 是 底层 runtime ，mui 是 前 壮 框 困 ， 他 们 的 关系 类 似 phonegap 和 jqmobile.。 
点 击 查 看 : 移动 App 开 发 入 门 教程 
更 多 开源 示例 点 击 这 里 : https//github.com/dcloudio/casecode 








@ [Rn Ea 




















13.1 创建 Hello mui 示 例 


2 加 HelloMui 

bm css 

b [mn examples 

b lm fonts 

b lm images 

bmjs 

b lm libs 
Bh unpackage 
index-menu.html 
国 manifestjson 


图 13.2 项 目 结构 


(3) 在 浏览 器 内 运行 该 项 目 . 如 图 13. 3 所 示 。 

(4) 单 击 其 中 的 选项 ,可 以 看 到 各 种 界面 效果 ,如 图 13.4 所 示 。 

(5) 连接 手机 后 ,选择 “运行 ">>“ 手 机 ”运行 , 单 击 “ 运 行 ” 按 钮 ,就 可 以 在 手机 上 体验 
MUI 的 各 项 能 力 。 连 接手 机 的 方法 参见 第 1 章 。 
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[TRNATT Fa | 

€ 3 © [© 12700ta1/HeloMUinder htm 妇 轩 3 
phe I5 x 1 Xv Orer HO | 民 加 Bemens Coroe Source hetwork » i x 

加 @ ip ny 图 Goopsmi 窜 











accordion ( 折 委 面板 ) 


actionsheet (操作 去 ) 
badge ( 数 了 关 标 ) 
button( 按 条) 
cardview ( 卡片 ) 
checkbox (三 沈 杠 ) 
date tme ( 日 BT ) 
dialog ( 消 忆 杜 ) 
aery sider (图 片 办 村 ) 
galery table (图 广大 格 ) 
gid (9S 咯 ) 

icon (可 标 ) 

input (输入 框 ) 

tist (WE) 
media list (图 这 天 ) 


mmort Deni) 





| Wor Nen* x 





图 13.3 运行 项 目 








图 13.4 各 种 界面 效果 


134 建立 MUI 项目 


利用 HBuilder MUI 模板 创 建 移动 App 项 目的 过 程 如 下 。 
(1) 选择 “文件 ”一 “新 建 ”>“ 移 动 App”, 在 如 图 13. 5 所 示 的 对 话 框 中 填写 “应 用 名 
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称 ”“ 选 择 模 板 ” 为 “mui 项 目 ”。 








应 用 名 称 : | demoMUI 














: [FHBuilderproject 浏览 














空 模板 空 模板 只 包含 index.htm| 一 个 文件 和 相关 目录 . 

mui 项 目 已 包含 mui 的 s、css、 字 体 资源 的 项 目 模板 

mu 登录 模板 带 登 录 和 设置 的 MUI 模 板 项 目 

口 Hello H5+ HTML5plus 规 范 的 演示 ,包括 短 像 头等 各 种 庭 层 能 力 的 调用 
Hello mui mui 前 庙 框 染 各 种 UI 控件 ( 如 按钮 ) 的 展示 























EE 站 盾 上 E 








语法 
Javascript 版 本 : |ECMAScript 5.1 ~ 














HTML5+ 星 底层 runtime，mui 是 前 庙 框 架 ,他 们 的 关系 类 似 phonegap 和 jqmobile. 
点 击 查看 ， 移动 App 开 发 入 门 教程 
更 多 开源 示例 点 击 这 里 : httpsi//github.com/dcloudio/casecode 








@ 区 成 中 

















13.5 创建 mui 项 目 


(2) 项 目 结构 如 图 13. 6 所 示 。 其 中 ,index. html 默认 为 首页 。 


责 unpackage 
加 indexhtml 
国 manifestjson 





图 13.6 项 目 结构 


(3) 三 步 措 好 页 面 主 框架 。 

@ 新 建 仿 mui 的 HTML 文件 。 在 HBuilder 中 新 建 HTML 文件 ,选择 * 含 mui 的 
HTML” 模 板 , 可 以 快速 生成 mui 页 面 模板 ,该 模板 默认 处 理 了 mui 的 js、css 资源 引用 。 

@ 输入 mheader。 顶 部 标题 栏 是 每 个 页 面 都 必需 的 内 容 , 在 HBuilder 中 输入 
mheader, 可 以 快速 生成 顶部 导航 栏 。 

@ 输入 mbody。 在 HBuilder 中 输入 mbody, 可 快速 生成 包含 . mui-content 的 代码 
块 。 除 顶部 导航 、 底 部 选项 卡 两 个 控件 外 ,建议 其 他 控件 都 放 在 . mui-content 控件 内 。 
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135 咖啡 商城 一 一 移动 App 


13.5.1 项 目 说 明 


制作 咖啡 商城 一 一 移动 App 的 UI, 包 括 4 个 基本 模块 : 首页 商品 详情 .购物 车 、 我 
的 订单 。 其 中 首页 包括 导航 广告 和 商品 展示 ,如 图 13.7 所 示 。 


< 器 卜 训 城 首页 < 册 时 高 城 首页 


证 请 “ees < 于 








后 人 rp 
外 包 鲁 】 
© 全 © Like Read more 
四 四 
as 本 
i ~ 王 8| 


【 忆 亲 西亚 原 要 运 口 】 尖 全 亿 保 后 各 于 王 车 术 ng 三 全 一 


-i 
.2 





| 


图 13.7 App 首 页 
“商品 详情 ?页 面 如 图 13. 8 所 示 。“ 购 物 车 页面 如 图 13. 9 所 示 。 


商品 详情 司 0 购物 车 


店铺 : 蔽 梓 手 工 亿 培 
从 党 妈 嘲 
特 流 运 洁 驯 哇 基 三 


从 换 W 


三 全 一 这 党 咖 时 检 15g"100 郑 效 。 x 
Be 





，。 摩卡 Wb 中 
EB scene tnx 





口语 匀 :到 面 和 啡 店 
原味 是 咖 天 香 浓 3 合 1 ¥89 口 。 。 要 由 
| 
送 杯 Nestle 难 并 1+2 原 味 二 合 一 过 尝 哺 啡 粉 100 冬 礼 全 
1500g Ge 
奈 叶 三 大 香波 3 人 1 ia 


快 瘟 !00 月 条 24501 符 
已 选 商 品 0 件 合计 (不 会 运 卖 ) 半 0.00 


Ec EE = 
图 13.8 “商品 详情 "页面 图 13.9 “购物 车 ”页 面 


9 | 


HIMLS+CSS3+Javaseript 顺 由 四 映 


“我 的 订单 ”页面 如 图 13. 10 所 示 。 


0 我 的 订单 0 我 的 订单 
全 部 。 待 付 歌 。 待 发 策 。 待 收 千 。 待 评价 全 部 竺 人数 。 竺 发 告 。 待 收 告 待 评价 
玛丽 和 叶 店 > 等 待 习 家 付 吉 雪 疡 咸 尔 证 觅 店 > 卖家 已 发 货 
二 麦 斯 威 尔 淮 烛 咖 啡 
办 m= 知 六 过 滞 刷 时 队 二 合 一 90 条 和 

G7 咖啡 淮 间 咖啡 

原味 壬 车 啡 香 浓 3 合 1 三 合 一 这 涪 岗 里 粉 15g"100 条 装 

摩卡 咖啡 

heen Ee UB Gs. a21s 

伏 巢 咖啡 


行 坟 尘 和 时 窘 三 合 一 90 条 凌 
玲 昌 咖啡 
三 合 - 这 党 咽 时 窘 150"100 科 装 


和 摩卡 咖啡 
Getta 


图 13.10 “我 的 订单 ”页 面 
13.5.2 项 目 设 计 
此 项 目 包含 多 种 UI 控件 ,如 图 片 轮 播 .九宫 格 、 图 文 表格 、 卡 片 视图 、 底 部 选项 卡 等 。 
使 用 MUI 模 板 开发 ,可 以 利用 模板 控件 快速 完成 项 目 界面 的 搭建 。 
13.5.3 项 目 实施 


(1) 新 建 移动 App 项 目 ,命名 为 coffee_app, 选 择 “MUI 项 目 ” 模 板 。 


(2) 新 建 目录 pages, 新 建 HTML 文件 “首页 . html”, 选 择 * 含 mui 的 html”, 如 图 13. 11 
所 示 。 


(3) 编辑 “首页 . html”, 输 入 mHeader, 快 速生 成 首页 头 部 ,如 图 13. 12 所 示 。 


5 咖啡 商城 首页 


4 加 coffee app 


图 13.11 新 建 首页 图 13.12 首页 头 部 


EDEL 


(4) 输入 mBody, 生 成 页 面 主体 。 
(5) 输入 mslider_gallery, 生 成 图 片 轮 播 ,如 图 13. 13 所 示 。 
(6) 输入 mgrid, 生 成 九宫 格 , 如 图 13. 14 所 示 。 


< 咖啡 商城 首页 


< 咖啡 商城 首页 





mee 
Location Search Phone 
图 13.13 图 片 轮 播 图 13.14 九宫 格 


(7) 输入 mslider_gallery_table, 生 成 图 文 表格 ,如 图 13. 15 所 示 。 

(8) 想 制作 “卡片 视图 ”, 但 是 不 知道 它 的 快捷 键 ,可 以 从 HelloMUI 示例 项 目 中 找 它 
的 代码 。 找 到 example 目录 中 的 card. html ,复制 第 40 一 52 行 ,粘贴 到 首页 . html 中 。 换 
上 自己 的 图 片 ,效果 如 图 13. 16 所 示 。 


< 咖啡 商城 首页 
I 
Home Email Chat 
es am 习 
Location Search Phone 


Posted on January 18, 2016 
这 全 三 寺 文 意 拉 要 , 让 法 者 对 文章 内 容 有 个 起 呈 的 要 
“区 


文字 说 明 1 文字 说 明 2 
图 13.15 图 文 表格 图 13.16 卡片 视图 








HIMLS+CSS3+Javaseript 顺 由 四 映 


(9) 输入 mtab, 生 成 底部 选项 卡 ,如 图 13. 17 所 示 。 





图 13.17 底部 选项 卡 


(10) 完成 首页 的 界面 布局 ,替换 其 中 的 图 片 和 文字 。 其 余 的 页 面 和 UI 控件 ,请 参照 
以 上 方式 自己 完成 ,此 处 不 再 袭 述 。 


136 Hello H5+ 示例 


HBuilder 开发 环境 提供 了 一 个 Hello H5 十 示例 程序 ,并 提供 了 调用 手机 底层 功能 的 
方法 ,展示 如 何 实现 设备 能 力 ( 如 摄像 头 、 陀 螺 仪 .文件 系统 等 ) 及 业务 能 力 (如 上 传 下 载 、 
二 维 码 、 地 图 、 支 付 .语音 输入 、 消 息 推送 等 )。 通 常 ,可 以 先 创 建 这 个 示例 ,运行 和 展示 功 
能 ,然后 参照 其 中 的 代码 编写 自己 的 App。 

创建 Hello H5 十 示例 程序 的 过 程 如 下 所 示 。 

(1) 选择 文件 一 新 建 一 移动 App, 在 如 图 13. 18 所 示 的 对 话 框 中 填写 应 用 名 称 , 选 择 
模板 Hello H5 十 示例 。 

(2) 项 目 结构 如 图 13. 19 所 示 。 其 中 ,index. html 默认 为 首页 。 























器 创 时 移动 App - 5 
创建 移动 App 
请 纵 入 应 用 名 称 并 且 迁 择 一 个 模板 
应 再 g 称 |HeloH5 | ] 
位 置 : |FAHBuilderproject | [is] 
远近 模板 
口 全 模板 空 模板 只 包 全 index html 一 个 文件 和 相关 目录 。 模板 
口 mu 已 包 人 mui 的 scss、 字 体 资 源 的 项 目 模板 模板 
口 mui 司 录 模板 。 市 登录 和 设置 的 MUI 模 板 项 目 模板 
回 Helloe H5+ HTML5plus 规 范 的 演示 , 包括 过 你 头等 各 种 诬 挟 能 力 的 调用 元 4 回 helloH5 
口 Hello mui mui 前 访 杠 各 各 种 UI 控件 ( 如 控 钮 ) 的 展示 示例 ? lm audio 
bm css 
bm doc 
语法 psimg 
Javascript 版 本 ECMAScript 5.1 v b 访 js 
产品 plus 
HTML5+ 是 底层 runtime , mui 是 前 凌 杠 条 , 他 们 的 关系 关羽 phonegap 和 jqmobile- 各 psdaoe 
点 击 查 看 ， 移 动 App 开 发 入 门 教程 加 abouthtml 
更 多 开源 示例 点 主 这 里 : httpsy/githubcorydcloudio/casecode iconpng 
加 indexhtml 
logo.png 
和 manifestjson 
[ 画 sapng 
@ fa || Rs | 国 :se@zxpng 
画 sa@3xpng 
图 13.18 创建 Hello H5 十 示例 图 13.19 项 目 结构 
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(3) 可 以 通过 真 机 运行 查看 效果 。 将 iOS 或 Android 设备 连接 到 计算 机 ,这 时 
HBuilder 会 自动 检测 连接 到 计算 机 上 的 设备 ,通过 菜单 栏 中 的 “运行 "菜单 启动 ,如 图 13. 20 
所 示 。 























| 








| 各 在 [F4C714D54477] 设 备 上 运行 

5 2 - Im-scale=1.0, us 
6 运行 配置 (N).… ( 国 如何 使 用 Chrome 控 制 台 调 斌 Android 应 用 

7 <script type="text/javascript"> 











8 扩展 API 是 否 准 备 ， 如 果 没 有 则 监听 “plusready" 事 件 
9=if(window-plus) 奸 

19 plusReady(); 

115Delse{ 

12 document.addEventListener( “plusready", plusReady, false ); 


图 13.20 手机 运行 














(4) 示例 App 在 手机 上 的 演示 效果 如 图 13. 21 所 示 。 


图 13.21 示例 App 在 手机 上 的 演示 效果 
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137 创建 Hello H5+ 项 目 


创建 Hello H5 十 示例 程序 的 过 程 如 下 所 示 。 
(1) 选择 "文件 ”一 "新建 "一 “移动 App”, 在 如 图 13. 22 所 示 的 对 话 框 中 填写 “应 用 名 
称 ” 为 HelloWorld, 选 择 空 模板 。 
器 创建 移动 App - 喇 醒 到 


创建 移动 App 
请 输入 应 用 名 称 并 目 选择 一 个 模板 . 





应 用 信息 
应 用 名 称 : HelloWorld 











i 


位 置 : |F\HBuilderProject 


选择 模板 

回 空 模板 空 模板 只 包含 index html 一 个 文件 和 栓 关 目录 。 

口 mui 项 目 已 包含 mui 的 js、css、 字 体 资 源 的 项 目 模板 

口 mu 得 录 模 板 。。 市 登录 和 设置 的 MUI 楼 板 项 目 

口 Hello H5+ HTML5plus 规 范 的 演示 ,包括 委 像 头等 各 种 底层 能 力 的 调用 
口 Hello mui mu 前 甘 框 困 各 种 UI 控 件 ( 如 按钮 ) 的 展示 


EE 


语法 
Javascript 版 本 : ECMAScript 5.1 v 
HTML5+ 是 底层 runtime ,mui 是 前 污 框 架 ,他们 的 关系 类 似 phonegap 和 jqmobile。 


点 击 查 看。 移动 App 开 发 入 门 教程 
更 多 开源 示例 点 击 这 里 : https://github.com/dcloudio/casecode 





@ [Laanp || ms | 
图 13.22 创建 Hello H5 十 项 目 


(2) 项 目 结构 如 图 13. 23 所 示 。 其 中 ,index. html 默认 为 首页 。 

(3) 在 项 目 管理 器 中 双击 manifest. json 文件 ,打开 应 用 配 Halewsnd 
置 页 面 ,如 图 13. 24 所 示 。 对 于 要 打包 的 原生 应 用 而 言 ,其 各 种 “一 是 各 
配置 均 在 此 处 。 号 

(4) 在 项 目 管理 器 中 双击 index. html 文件 (快捷 键 为 Ctrl 时 ee 
十 T, 然 后 输入 in 选择 文件 后 按 回 车 键 ) ,对 于 HTML5 十 应 用 sess 
的 页 面 有 一 个 很 重要 的 plusready 事件 ,此 事件 会 在 页 面 加 载 后 图 13.23 项 目 结构 
自动 触发 ,表示 所 有 HTML5 十 API 都 可 以 使 用 ,在 此 事件 触发 
前 不 能 调用 HTML5 十 API, 所 以 应 该 在 此 事件 回调 函数 中 调用 页 面 初始 化 需要 调用 的 
HTML5 十 API, 而 不 应 该 在 onload 或 DOMContentLoaded 事件 中 调用 。 


(5) 编辑 程序 启动 后 默认 显示 的 页 面 index. html, 在 页 面 中 添加 一 个 按钮 , 单 击 该 按 
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应 用 名 称 :|Helloworld 

appid: |H535F384D 云 沪 获取 
版 本 号 。 10 

和 AD: |indexhtml 远 择 -， 
应 用 搞 述 ; 














口 应 用 是 否 全 屏 显示 应 用 全 屏 配 置 涪 明 


口 debug 模 式 (android 是 否 支持 日 志 输 出 及 chrome 调 过 
应 用 资源 是否 解压 。” @ 不 解压 直接 运行 。 〇 解压 资源 后 运行 














应 用 信息 | 图标 配置 启动 图 片 (splash) 配 置 | SDKE 置 | 模块 权限 配置 页面 引 用 关系 | 代码 视 加 | 








图 13.24 应 用 配置 页 面 


钮 后 将 打开 新 页 面 加 载 www. dCloud. io, 为 了 实现 此 功能 ,需要 用 HTML5 十 扩展 API 
中 的 plus. webview. create() 方 法 创建 窗口 ,如 图 13. 25 所 示 。 


4 <head> 
5 <meta charset="utf-8"> 
6 <meta name="viewport”" content="initial-scale=1.0, maximum-scale=1.0, user-scalab 
到 <title></title> 
83 <script type="text/javascript"> 
9 document .addEventListener('plusready’, function() { 
10 //console.1log(" 所 有 plus apji 都 应 该 在 此 事件 发 生 后 调用 ， 和 否则 会 出 现 plus is undefined。' 
11 
12 D; 
139 function openNewWebview() { 
14 var url = "http://www.dCloud.io™; 
15 plus.webview.create(url).show(); 
16 } 
17 </script> 
18 </head> 
19 
265 <body> 
21 Hello World<br> 
22 
23 </body> 
24 
25 </html> 


13.25 ”编辑 index. html 


编辑 完成 后 , 按 Ctrl 十 S 组 合 键 保存 。 

(6) 写 完 代码 后 ,可 以 通过 真 机 运行 查看 效果 。 将 iOS 或 Android 设备 连接 到 计算 
机 ,这 时 HBuilder 会 自动 检测 连接 到 计算 机 上 的 设备 ,通过 菜单 栏 中 的 “运行 "菜单 启动 ， 
如 图 13. 26 所 示 。 








而 ML5+clss+Javastript 画 同 而 多 























<script type= "text/javascript"> 
// 扩展 API 是 否 准备 ， 如 果 没 有 则 监听 “plusready" 事 件 
9- if(window.plus) 奸 
19 plusReady(); 
119Belse{ 
12 document .addEventListener( "plusready", plusReady, false ); 


图 13.26 手机 运行 


也 可 通过 工具 栏 启动 ,如 图 13. 27 所 示 。 

















:imkwx 上 io-e-io :REF 








itial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 


ireadv" 事 件 
13.27 通过 工具 栏 启动 


(7) 启动 真 机 运行 后 ,在 控制 台中 显示 以 下 信息 ,如 图 13. 28 所 示 。 





pkg: /data/local/tmp/android_base.apk 
此 用 安装 完成 ， 正 在 同步 曾 换 硕 目 资源 .， 


己 自 动 








图 13.28 控制 台 信息 


注意 : 如 果 提 示 错 误 信 息 ,尝试 “终止 "后 重新 启动 真 机 运行 。 

(8) 启动 真 机 后 会 弹出 提示 框 , 单 击 “ 确 定 ” 按 钮 ,显示 页 面 如 图 13. 29 所 示 。 

Android 设备 会 自动 安装 并 启动 HBuilder 调试 基 座 ,iOS 设备 需要 开发 者 手动 单 击 
手机 桌面 的 HBuilder 调试 App。 

注意 : 真 机 联 调 App 时 ,提供 的 是 一 个 测试 环境 ,并 不 真实 发 生 打包 ,调试 基 座 App 
的 名 字 、 图 标 、 启 动 封面 图 片 . 是 否 可 旋转 这 些 只 有 打包 才能 更 改 的 属性 不 会 因为 开发 者 
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Hello World 三 产品 


A 


串 公告 :法 院 判 决 APICloud 赔 付 DCloud 共 计 184.48 万 
元 并 公开 道 款 


HBuilder 


飞速 编码 的 极 客 工具 ， 
手指 严 ， 眼 睛 严 

















四 四 


HBuldor SrRunbime 。 NU wap2app unkapp 





图 13.29 显示 页 面 


修改 manifest 文件 而 变化 。 只 有 修改 manifest 且 单 击 菜单 “发 行 -打包 ”后 ,上 述 4 个 设置 
才能 更 改 。 

运行 后 ,在 HBuilder 中 修改 页 面 代 码 ,保存 后 会 自动 同步 到 手机 中 ,如 果 手 机 当前 展 
示 着 被 修改 的 页 面 , 则 会 刷新 页 面 。 

尝试 在 JavaScript 中 在 plus ready 之 后 编写 console. log, 或 者 改写 错误 的 JavaScript， 
可 以 直接 在 HBuilder 的 控制 台 看 到 结果 。 

如 果真 机 运行 遇 到 各 种 故障 ,请 单 击 运行 菜单 里 的 “ 真 机 运行 常见 故障 指南 ”。 

(9) 发 行 打包 。 完 成 应 用 页 面 的 编辑 后 ,需要 正式 打包 为 原生 的 apk 或 ipa 安装 包 。 

通过 菜单 栏 中 的 “发 行 ”>>“App 打包 ”, 打 开 “App 云端 打包 ?对 话 框 , 如 图 13. 30 所 
示 。 注 意 , 只 有 移动 App 项 目 才 可 以 打包 。 

AppID: iOS 应 用 标识 ,推荐 使 用 反 向 域名 风格 的 字符 串 , 如 “com. domainname. 
appname”, 必须 与 profile 文件 绑 定 的 AppID 匹配 。 

私 钥 密码 : 导入 私 钥 证 书 的 密码 。 

profile 文件 : iOS Provisioning Profile 文件 (. mobileprovision) ,必须 与 苹果 AppID 
和 私 钥 证 书 匹 配 。 

私 钥 证 书 : iOS Certificates 文件 (. p12)。 

HBuilder 提供 的 打包 有 云 打 包 和 本 地 打包 两 种 。HBuilder 并 不 会 向 开发 者 收取 任 
何 有 关 打 包 的 费用 ,也 不 限制 开发 者 使 用 本 地 打包 。 

云 打包 的 特点 是 DCloud 官方 配置 好 了 原生 的 打包 环境 ,可 以 把 HTML 等 文件 编译 
为 原生 安装 包 。 

。 对 于 不 熟悉 原生 开发 的 前 端 工程 师 , 云 打包 大 幅 降 低 了 他 们 的 使 用 门槛 。 
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ApPID |io.dcloud.H535F384D 
私 钥 密码 
profile 文 件 [aa | 
私 铀 证 书 [aa | 
注 : App 云 六 打 | 





包 使 得 你 不 需要 配置 Xcode 和 Android SDK, 
DCloud 郑 重 承诺 不 保 器 任何 开发 者 证 书 及 开发 信息 , 
如 条 望 查看 完整 App 功 能 演示 ,请 点 击 Hello HTML5+ 





图 13. 30 “App 云端 打包 ”对 话 框 


。 对 于 没有 Mac 计算 机 的 开发 者 ,也 可 以 通过 云 打包 直接 打出 iOS 的 ipa 包 。 

无 论 是 云 打包 ,还 是 本 地 打包 ,都 在 HBuilder 的 “菜单 -发 行 ”中 。 

(10) 查看 打包 状态 。 通 过 菜单 栏 中 的 “发 行 "”>“ 查 看 打包 状态 ”打开 “查看 App 打 
包 状 态 ” 对 话 框 ,查看 打包 历史 记录 和 状态 ,如 图 13. 31 所 示 。 














本 二 一 = [区 
安装 包 名 称 申请 时 间 制作 状态 
H59F26047_04170019jipa 20140417 00:27:03 打包 成 功 ， 下 载 完成 

















图 13. 31 查看 打包 状态 


CEE 苇 四 由 移动 奈 而 雄 


如 果 “ 制 作 状 态 ” 栏 显示 “打包 成 功 , 下 载 完成 ”, 则 表示 云端 打包 完成 ,可 单 击 “ 打 开 下 
载 目 录 ” 查 看 下 载 的 安装 包 。 
(11) iOS 发 布 。 对 于 iOS 平台 ,可 以 选择 越狱 包 或 正式 包 (Appstore 专用 或 企业 证 
书 ) ,前 者 只 能 安装 在 已 越狱 的 设备 上 ,后 者 可 通过 iDP 证 书 打包 提交 到 Appstore 发 布 ， 
或 通过 iEP 证 书 打包 在 企业 内 部 发 布 。 
(12) Android 发 布 。 对 于 Android 平台 ,可 以 选择 使 用 DCloud 生成 的 公用 证 书 或 
自己 生成 的 证 书 ,两 者 不 影响 安装 包 的 发 布 ,唯一 的 差别 是 证 书 中 的 开发 者 和 企业 信息 
不 同 。 





' 























3) 生成 Android 签名 证 书 ( 使 用 DCloud 公用 证 书 可 忽略 此 操作 )。 确 保 计算 机 上 
安装 了 JRE, 我 们 将 使 用 JRE 自 带 的 创建 和 管理 数字 证 书 的 工具 Keytool。 使 用 以 下 命 
令 生 成 证 书 , 如 图 13. 32 所 示 。 





画 管理 员 : 命令 提示 符 - = 配 相 | 


p: \DEHBuilder 











图 13.32 生成 证 书 


。 keystore helloworld. keystore 表示 生成 的 证 书 , 可 以 加 上 路 径 (默认 在 用 户主 目 
录 下 )。 

。 alias helloworld 表示 证 书 的 别名 是 helloworld。 

。 keyalg RSA 表示 采用 的 是 RSA 算法 

。 validity 10000 表示 证 书 的 有 效 期 是 10000 天 。 


138 项 目 : 语音 答题 App 


13.8.1 项 目 说 明 


制作 一 个 手机 App ,用 户 单 击 按钮 播放 问题 语音 ,之 后 等 待 用 户 说 出 答案 , 当 用 户 作 
答 后 ,通过 语音 识别 判断 答案 是 否 正确 ,给 出 判断 结果 。 用 户 界面 如 图 13. 33 所 示 。 
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人 下 二 1544 $1| 
< Speech [ 











语音 输入 内 容 











Speech 提供 语音 识别 功能 ， 可 通过 碍 克 风 设备 进行 语音 贸 和 操作 











图 13.33 ”用户 界面 


13.8.2 项 目 设计 


(1) 准备 3 个 语音 文件 ,如 图 13. 34 所 示 。 

语音 内 容 分 别 是 :“ 西 汉中 后 期 著名 的 散文 家 有 哪些 ?”“ 恭 喜 镶 i 
你 ,答对 了 "对 不 起 , 答 错 了 "。 和 

(2) 从 Hello H5 十 示例 程序 中 找 出 语音 识别 的 案例 plus/ 国 wrongmp3 
speech. html, 其 中 提供 了 基于 讯 飞 语音 识别 技术 的 plus 插件 ,本 例 图 13.34 语音 文件 
中 主要 使 用 startRecognize() 方 法 实现 中 文 语音 识别 ,如 果 要 做 英文 
语音 识别 ,还 可 以 使 用 startRecognizeEnglish() 方 法 。 

(3) 通过 语言 识别 ,把 用 户 输入 的 语音 转换 为 文字 保存 在 字符 串 中 ,在 字符 串 中 查找 
子 串 ,如 果 有 “司马 相 如 ”或 者 “司马 迁 ”, 就 算 回 答 正确 。 


13.8.3 项目 实施 
新 建 项 目 ,使 用 空 模板 在 index. html 中 编辑 如 下 代码 。 


< !DOCTYPE HITML> 
<html> 
<head> 
<meta charset= "utf- 8" /> 
<meta name= "viewport" content="initial- scale=1.0, maximum- scale=1.0, user— 
scalable=no" /> 


<meta name= "HandheldFriendly" content= "true" /> 
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<meta name= "MobileOptimized" content="320" /> 
<title>Hello H5+< /title> 
< script type= "text/javascript" src="js/common.js"></script> 
< script type= "text/javascript"> 
Var text=null; 
function ask() { 
document .getElementById ("ask") .play (); 
Bs; 
function startRecognize() { 
if (plus.os.name== "Rndroid' && 
navigator .userAgent .indexOf ('StreamApp')>0) { 
plus.nativeUI.toast(' 当 前 环境 暂 不 支持 语音 识别 插件 '); 
return; 
} 
Var options= {}; 
options.engine= 'iFly'; 
text.value= ""7 
outset (" 开 始 语音 识别 : ")7 
Plus.speech.startRecognize (options, function(s) { 
outLine(s); 
text .valuet=s; 
testanswer (s); 
}, function(e) { 
outSet ("语音 识别 失败 : "+e.message); 
Ds; 


function testanswer (a) { 
//alert ("get "+a); 
Var text= document .getElementById ("text"); 
Var a=text .value; 
if(a.indexof ("司马 迁 ")>=0 || a.indexof ("司马 相 如 ")>=0) { 
document .getElementById ("praise") .play()7 


} 
</script> 
<link rel="stylesheet" href= "css/common.css" type= "text/css" 
charset= "utf- 8" /> 
< /head> 
<body onload= "text= document .getElementById('text');"> 
<header id= "header"> 
<div class= "nvbt iback" onClick= "back (true)">< /div> 
<div class= "nvtt"> Speech< /div> 





年 ML5+clss+Javastript 画 同 而 辆 





















<div class= "nvbt idoc" onClick= "openDoc ("Speech Document", 
"/doc/speech.html')">< /div> 
<audio id="ask" src="img/ask.mp3">< /audio> 
<audio id= "praise" src="img/praise.mp3">< /audio> 
<audio id= "wrong" src="img/wrong.mp3">< /audio> 
< /header> 
<div id="dcontent" class= "dcontent"> 
<div class= "button" onClick="ask()"> 提 &nbsp; gnbsp; 间 < /div> 
<br/> 
<div class= "button" onClick= "startRecognize()"> 开 始 语音 识别 < /div> 
<br/> 
< textarea readonly="readonly" id="text" style="margin: 2%;padding: 2%; 
height:50%;width:90%;border:1px solid #6C6C6C;— webkit— border- radius: 2px; 
border- radius: 2px;- webkit- appearance:none;"> 
语音 输入 内 容 
< /textarea> 
</div> 
<div id="output"> 
Speech 提供 语音 识别 功能 ,可 通过 麦克 风 设 备 进行 语音 输入 操作 。 
</div> 
< /body> 
<script type= "text/javascript" src="js/immersed.js"></script> 
</htm> 





网 站 综合 设计 


章节 概述 

通过 本 章 的 学 习 , 学 生 能 够 综合 运用 前 面 章节 所 讲 知识 ,充分 掌握 HTML、CSS、 
JavaScript 的 基本 语法 和 作用 ,在 熟练 运用 所 学 技术 的 基础 上 完成 一 个 较为 综合 复杂 的 
咖啡 销售 网 站 的 页 面 设计 和 实现 ,学 会 使 用 HTML 进行 页 面 结构 搭建 ,使 用 CSS 进行 页 
面 样式 设 定 , 使 用 JavaScript 实现 页 面 动 态 效 果 和 用 户 动 态 交 互 。 

学 习 重 点 与 难点 

重点 : 

(1) HTML 与 HTML5 的 常用 标签 的 使 用 。 

(2) CSS 样式 定义 。 

(3) JavaScript 脚本 编写 、 函 数 定 义 、 事 件 处 理 。 

难点 : 

(1) CSS 样式 的 定义 和 使 用 。 

(2) JavaScript 事件 处 理 。 

重点 及 难点 学 习 指导 建议 : 

。 对 综合 项 目的 整体 需求 进行 反复 阅读 ,理解 需求 的 含义 。 

。 根据 需求 设计 项 目 各 个 主要 页 面 的 布局 ,可 参考 本 章 给 出 的 UI 设计 样 例 。 

。 对 每 个 页 面 中 的 关键 内 容 确 定 使 用 的 实现 技术 。 

。 根据 前 面 章节 对 综合 项 目 各 个 关键 模块 的 实现 ,完成 整个 项 目 中 各 个 页 面 的 代码 

实现 。 
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141 项 目 构 思 


本 章 实现 一 个 综合 的 、 较 为 复杂 的 Web 网 站 界面 ,综合 运用 之 前 所 学 知识 ,利用 
HTML5、CSS、JavaScript 等 技术 ,完成 一 个 咖啡 销售 网 站 的 界面 设计 和 实现 。 

咖啡 销售 网 站 的 页 面 主要 包括 以 下 4 个 部 分 。 

(1) 商城 首页 

(2) 商品 详情 页 面 

(3) 购物 车 页 面 

(4) 我 的 订单 页 面 

下 面 分 别 对 以 上 页 面包 含 的 内 容 加 以 说 明 。 


1. 商城 首页 


整个 咖啡 销售 网 站 的 首页 面 主要 包含 网 站 导航 区 、 商 品 分 类 区 、 商 品 展示 区 、 新 闻 广 
告 区 和 页 脚 区 。 

(1) 网 站 导航 区 : 位 于 首页 面 的 顶部 ,从 上 至 下 依次 用 于 展示 用 户 通用 功能 链接 区 、 
网 站 搜索 操作 区 、 网 站 各 模块 导航 条 区 。 

Q@ 用 户 通用 功能 链接 区 ,从 左 至 右 依次 为 

。“ 登 录 ” 链 接 。 

。“ 注 册 ” 链 接 。 

。“ 我 的 订单 "链接 。 

*。“ 购 物 车 ”链接 。 

。“ 帮 助 中心 " 链 接 。 

@ 网 站 搜索 操作 区 ,从 左 至 右 依次 为 

。 网 站 Logo 图 标 。 

。 站 内 商品 搜索 框 和 搜索 按钮 。 

*。“ 购 物 车 ?按钮 。 

。“ 我 的 驿 吧 ” 按 钮 。 

@ 网 站 各 模块 导航 条 区 ,从 左 至 右 依 次 为 

。“ 首 页 ”链接 。 

。“ 商 品 分 类 "链接 。 

。“ 商 品 详情 ”链接 。 

(2) 商品 分 类 区 : 位 于 首页 面 的 左 侧 , 从 上 至 下 依次 用 于 展示 咖啡 商品 大 类 名 称 链 
接 、 咖 啡 商品 小 类 名 称 链接 、 商 品 展示 区 。 

@ 咖啡 商品 大 类 名 称 链接 ,从 上 至 下 依次 为 

。 白 咖 啡 。 

。 咖啡 器 具 。 

。 咖啡 原料 。 
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”咖啡 辅料 。 

”咖啡 索 。 

@ 咖啡 商品 小 类 名 称 链 接 , 从 上 至 下 包括 

。 白 咖 啡 大 类 下 ,包含 大 马 白 咖 啡 . 白 咖 啡 等 。 

”咖啡 大 类 下 ,包含 咖啡 豆 .咖啡 生 豆 ` 有 机 咖啡 ,咖啡 胶 吉 等 。 

。 咖啡 器 具 大 类 下 ,包含 奶 泡 壶 . 压 粉 器 、 矿 粉 盒 .滤纸 /滤器 / 滤 布 / 虑 杯 、. 光 波 炉 等 。 
。 咖啡 原料 大 类 下 ,包含 咖啡 粉 .速溶 咖啡 粉 ` 纯 咖啡 粉 等 。 

(3) 商品 展示 区 : 位 于 首页 面 中 间 , 从 上 至 下 依次 用 于 展示 幻灯 图 片 公告 展示 区 、 商 
表 展 示 区 。 

幻灯 图 片 公告 展示 区 ,由 一 组 图 片 以 幻灯 片 方 式 循环 播放 ,用 于 展示 网 站 重要 公 
息 、 广 告 等 。 

@ 商品 列表 展示 区 ,从 上 至 下 包括 X 行 Y 列 的 以 列表 方式 排列 的 商品 展示 单元 。 
每 个 展示 单元 用 于 展示 一 种 商品 ,每 个 展示 单元 从 上 至 下 包括 

”商品 图 片 。 

。 商品 价格 。 

。 和 售 出 件数 。 

(4) 新 闻 广 告 区 : 位 于 首页 面 右 侧 ,从 上 至 下 依次 用 于 展示 咖啡 快报 区 .广告 区 。 
Q@ 咖啡 快报 区 ,用 于 显示 快报 标题 链接 。 

从 上 至 下 包括 4 行 2 列 的 以 列表 方式 排列 的 快报 标题 。 左 侧 提供 “更 多 快报 ”链接 。 
@ 广告 区 ,用 于 展示 网 站 招标 、 活 动 .优惠 等 广告 宣传 图 片 。 

从 上 至 下 包括 闵行 1 列 的 以 列表 方式 排列 的 广告 图 片 。 

(5) 页 脚 区 : 位 于 首页 面 底部 ,从 左 至 右 依次 展示 如 下 内 容 。 

。“ 网 站 地 图 ”链接 。 

。“ 关 于 我 们 ”链接 。 

。，“ 沙 龙 动态 "链接 。 

。“ 友 情 链接 ”链接 。 

““ 联 系 我 们 "链接 。 

*““ 版 权 声明 ”链接 。 

。“ 会 员 登 录 ” 按 钮 。 

。“ 会 员 注 册 ” 按 钮 。 


2. 商品 详情 页 面 
商品 详情 页 面 用 于 显示 商品 详细 信息 ,主要 包含 导航 区 、 商 品 购 买 区 ,热卖 商品 排行 








榜 、 商 品 详细 信息 显示 区 。 


导航 


(1) 导航 区 : 位 于 页 面 顶部 ,用 于 显示 网 站 中 的 其 他 模块 链接 ,与 商城 首页 的 “网 站 
区 ”内 容 一 致 

(2) 商品 购买 区 : 位 于 页 面 中 间 , 用 于 显示 商品 购买 操作 信息 ,从 左 至 右 依 次 用 于 展示 : 
@ 商品 图 片区 ,用 于 显示 商品 外 观 大 图 。 
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四 商品 购买 区 ,从 上 至 下 为 商品 名 称 、 商 品 简介 、 商 品 价格 、 商 品 单位 价格 、 邮 费 “ 立 
即 购买 "和 “加 入 购物 车 ”按钮 。 

@ 商品 细节 小 图 区 ,用 于 显示 商品 细节 小 图 片 。 

从 上 至 下 包括 : X 行 1 列 的 以 列表 方式 排列 的 商品 细节 小 图 片 。 

(3) 热卖 商品 排行 榜 : 位 于 页 面 左 侧 ,用 于 显示 热卖 商品 信息 ,从 上 至 下 包括 X 行 1 
列 的 以 列表 方式 排列 的 热卖 商品 展示 单元 。 

每 个 展示 单元 用 于 展示 一 个 热卖 商品 ,每 个 展示 单元 从 上 至 下 为 商品 图 片 、 商 品 简 
介 、 商 品 价格 、 售 出 件数 。 

(4) 商品 详细 信息 显示 区 : 位 于 页 面 中 间 , 用 于 显示 商品 详细 信息 ,从 上 至 下 依次 用 
于 展示 商品 详情 介绍 文字 区 、 商 品 细节 大 图 区 。 

@ 商品 详情 介绍 文字 区 。 

@ 商品 细节 大 图 区 ,用 于 显示 商品 细节 大 图 片 。 

从 上 至 下 包括 X 行 1 列 的 以 列表 方式 排列 的 商品 细节 大 图 片 。 


3. 购物 车 页 面 


购物 车 页 面 用 于 显示 购物 车 信息 ,主要 包含 导航 区 ,购物 车 商品 信息 区 。 

(1) 导航 区 : 位 于 页 面 顶部 ,用 于 显示 网 站 中 的 其 他 模块 链接 ,与 商城 首页 的 “网 站 
导航 区 ”内 容 一 致 

(2) 购物 车 商品 信息 区 : 位 于 页 面 中 间 , 用 于 显示 购物 车 内 的 商品 信息 ,从 上 至 下 包 
括 X 行 1 列 的 以 列表 方式 排列 的 购物 车 商品 展示 单元 。 

每 个 展示 单元 用 于 展示 一 个 购物 车 商品 。 每 个 展示 单元 从 左 至 右 为 商品 缩 略图 片 、 
商品 名 称 、 商 品 描述 、 商 品 单价 ,商品 数量 、 商 品 金额 \ 操 作 ( 包 括 “ 移 入 收藏 夹 ”链接 和 “ 删 
除 ” 链 接 )。 


4. 我 的 订单 页 面 


我 的 订单 页 面 用 于 展示 订单 信息 ,主要 包含 导航 区 ,链接 区 、 订 单 信息 显示 区 。 

(1) 导航 区 : 位 于 页 面 顶部 ,用 于 显示 网 站 中 的 其 他 模块 链接 ,与 商城 首页 的 “网 站 
导航 区 ”内 容 一 致 

(2) 链接 区 : 位 于 页 面 左 侧 , 用 于 显示 各 种 操作 链接 ,从 上 至 下 依次 展示 “我 的 购物 
车 ”链接 “已 买 到 的 宝贝 "链接 “我 的 收藏 ”链接 “我 的 积分 ?链接 “我 的 优惠 ”链接 “ 退 

(3) 订单 信息 显示 区 : 位 于 页 面 右 侧 ,用 于 显示 订单 详细 信息 ,从 上 至 下 包括 X 行 1 
列 的 以 列表 方式 排列 的 订单 商品 展示 单元 。 

每 个 展示 单元 用 于 展示 一 个 订单 商品 。 每 个 展示 单元 从 左 至 右 依 次 为 商品 缩 略 图 
片 、 商 品名 称 、 商 品 单价 、 商 品 数量 、 商 品 操作 (包括 “ 退 款 /退货 "链接 和 “投诉 卖家 ”链接 )、 
实 付款 、 交 易 状 态 ,交易 操作 (包括 “确认 收 货 ” 按 钮 )。 
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142 Ul 设计 


本 节 对 14.1 节 提 到 的 咖啡 销售 网 站 的 4 个 主要 页 面 进行 UI 设计。 
1. 商城 首页 


(1) 网 站 导航 区 : 位 于 首页 面 的 顶部 ,从 上 至 下 依次 用 于 展示 用 户 通用 功能 链接 区 、 
网 站 搜索 操作 区 、 网 站 各 模块 导航 条 区 。 

Q@ 用 户 通用 功能 链接 区 ,包含 用 户 “ 登 录 ”“ 注 册 ” 链 接 ,“ 我 的 订单 "链接,“ 购 物 车 ” 
链接 ,“ 帮 助 中心 " 链 接 等 。 

@ 网 站 搜索 操作 区 ,包含 网 站 Logo 图 标 、 站 内 商品 搜索 框 、 购 物 车 按钮 “我 的 驿 吧 ” 
按钮 。 

@ 网 站 各 模块 导航 条 区 ,包含 “首页 ”链接 “商品 分 类 ”链接 “商品 详情 ?链接 。 

首页 导航 区 UI 设计 效果 如 图 14. 1 所 示 。 


ETTEEETTECETTIICZETZO 


独特 , 餐饮 用 品 整合 运营 商 (wmx) nn MB EE 


人 am 人 


为 俯 提 供 一 站 式 末 购 及 配送 服务 方案 anbaomall.com 


bl 3 时 





图 14.1 首页 导航 区 UI 设 计 效果 

(2) 商品 分 类 区 : 位 于 首页 面 的 左 侧 , 从 上 至 下 依次 用 于 展示 咖啡 商品 大 类 名 称 链 
接 、. 咖 啡 商品 小 类 名 称 链接 。 

@ 咖啡 商品 大 类 名 称 链接 ,如 白 咖 啡 .咖啡 器 具 咖啡 原料 .咖啡 辅料 .咖啡 过 等 。 

@ 咖啡 商品 小 类 名 称 链接 ,如 : 

白 咖 啡 大 类 下 ,包含 大 马 白 咖啡 . 白 咖 啡 等 。 

咖啡 大 类 下 ,包含 咖啡 豆 . 咖 啡 生 豆 有 机 咖啡 .咖啡 胶 塞 等 。 

咖啡 器 具 大 类 下 ,包含 奶 泡 壶 、 压 粉 器 、 奢 粉 盒 .滤纸 /滤器 / 滤 布 / 滤 杯 、 光 波 炉 等 。 

咖啡 原料 大 类 下 ,包含 咖啡 粉 . 速 溶 咖啡 粉 . 纯 咖啡 粉 等 。 

商品 分 类 区 UI 设计 效果 如 图 14.2 所 示 。 

(3) 商品 展示 区 : 位 于 首页 面 中 间 , 从 上 至 下 依次 用 于 展示 幻灯 图 片 公告 展 示 区 、 商 
品 列表 展示 区 。 

@ 幻灯 图 片 公告 展示 区 ,由 一 组 图 片 以 幻灯 片 方 式 播放 ,用 于 展示 网 站 重要 公告 消 
息 、 广 告 等 。 

@ 商品 列表 展示 区 ,从 上 至 下 包括 XX 行 Y 列 的 以 列表 方式 排列 的 商品 展示 单元 。 
每 个 展示 单元 由 商品 图 片 、 商 品 价格 和 售 出 件数 构成 。 
商品 展示 区 UI 设计 效果 如 图 14. 3 所 示 。 
(4) 新 闻 广 告 区 : 位 于 首页 面 右 侧 ,从 上 至 下 依次 用 于 展示 咖啡 快报 区 ,广告 区 。 





和 
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由 奶 泡 地 | 压 粉 器 | 夸 粉 语 | 滤纸 / 
| 小 器 大 布 钴 标 | 光波 炉 | 其 它 


sg 扮 
咖啡 辅料 

| 咖啡 过 

虹吸 过 | 摩 上 这 | 法 式 压 壶 | 手 
>i 这 | 比 利 8 时 这 | 咖 时 这 
上 1 冰 识 这 | 土耳其 这 咖啡 过 | 赴 南 
上 高 局 主 | 其它 

咖啡 研磨 机 

电动 麻 豆 机 | 手动 计 豆 机 

| 烘焙 机 


图 14.2 商品 分 类 区 UI 设计 效果 
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图 14.3 商品 展示 区 UI 设 计 效果 





@ 咖啡 快报 区 ,用 于 显示 快报 标题 链接 ,从 上 至 下 包括 4 行 2 列 的 以 列表 方式 排列 
的 快报 标题 。 左 侧 提供 “更 多 快报 ”链接 。 

@ 广告 区 ,用 于 展示 网 站 招标 、 活 动 .优惠 等 广告 宣传 图 片 ,从 上 至 下 包括 X 行 1 列 
的 以 列表 方式 排列 的 广告 图 片 。 
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新 闻 广 告 区 的 设计 效果 如 图 14.4 所 示 。 
咖 叶 快报 更 多 快报 





咖啡 师 人 才 服 务 咖啡 什么 时 候 喝 最 提神 
加 盟 热 线 欢迎 进驻 咖啡 又 吧 
免费 开店 咖啡 的 好 处 与 坏处 
白 咖 啡 -黑色 的 东南 亚 咖 咖啡 驿 吧 公 告 


你 焉 不 至 怕 当 人 从 者 了 往 议 里 
图 14.4 新 闻 广告 区 的 设计 效果 





(5) 页 脚 区 : 位 于 首页 面 底部 ,从 左 至 右 依次 展示 “网 站 地 图 ”链接 “关于 我 们 ” 链 
接 “ 沙 龙 动态 ”链接 “友情 链接 ”链接 “联系 我 们 ”链接 “版 权 声明 ”链接 “会 员 登 录 ” 按 
钮 “会 员 注 册 ” 按 钮 等 。 

页 脚 区 UI 设计 效果 如 图 14. 5 所 示 。 





网 站 地 图 /关于 我 们 /沙龙 动态 /友情 链接 /联系 我 们 /版 权 声 明 


图 14.5 页 脚 区 UI 设计 效果 


2. 商品 详情 页 面 


商品 详情 页 面 用 于 显示 商品 的 详细 信息 ,主要 包含 导航 区 、 商 品 购买 区 、 热 卖 商品 排 
行 榜 、 商 品 详细 信息 显示 区 。 

(1) 导航 区 : 位 于 页 面 项 部 ,用 于 显示 网 站 中 的 其 他 模块 链接 ,与 商城 首页 中 的 “网 
站 导航 区 ”内 容 一 致 , 如 图 14. 1 所 示 。 

(2) 商品 购买 区 : 位 于 页 面 中 间 , 用 于 显示 商品 购买 操作 信息 ,从 左 至 右 依次 展示 商 
品 图 片区 、 商 品 购 买 区 、 商 品 细节 小 图 区 。 

@ 商品 图 片区 ,商品 外 观 大 图 。 

@ 商品 购买 区 ,从 上 至 下 包括 商品 名 称 、 商 品 简介 商品 价格 .商品 单位 价格 .邮费 、 
“立刻 购买 "和 “加 入 购物 车 ”按钮 。 

@ 商品 细节 小 图 区 ,从 上 至 下 包括 X 行 1 列 的 以 列表 方式 排列 的 商品 细节 小 图 片 。 
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商品 购买 区 UI 设计 效果 如 图 14. 6 所 示 。 


【二 16 万 特价 全 国 包 邮 ] 括 南 原装 进口 3 合 1 中 原 07 速 沿 和 0000 了 区 








【 1009%e 越 南 TRUNG NGUYEN 本 和 本 eb 
起 





【 100% 括 南 TRUNG NGUYEN 原装 进口 中 原 G7 咖 啡 】 正品 保证 ! 
店 浦 公告 本 店 默 认 邮 政 小 包 /天 天 快递 ， 本 庄 只 接受 换 发 申通 快递 、 顺 
丰 快 递 ， 请 联系 客服 补 上 邮费 差价 ,多谢 合 作 ! 备注 :全 国 包 地 商品 不 合 
状 珊 各 地 区 。 


¥ 33.99GED 
一 口 从 ¥-46:90 29.317t/500g 
广东 深圳 至 大 连 快递 :0.00 


Hr" BE 


14.6 商品 购买 区 UI 设计 效果 



























(3) 热卖 商品 排行 榜 : 位 于 页 面 左 侧 , 用 于 显示 热卖 商品 信息 ,从 上 至 下 包括 X 行 1 
列 的 以 列表 方式 排列 的 热卖 商品 展示 单元 。 每 个 展示 单元 由 商品 图 片 、 商 品 简介 、 商 品 价 
格 和 售 出 件数 构成 。 

热卖 商品 排行 榜 UI 设计 效果 如 图 14.7 所 示 。 

(4) 商品 详细 信息 显示 区 : 位 于 页 面 中 间 , 用 于 显示 商 
品 的 详细 信息 ,从 上 至 下 依次 展示 商品 详情 介绍 文字 、 商 品 
细节 大 图 。 

Q@ 商品 详情 介绍 文字 。 

@ 商品 细节 大 图 ,从 上 至 下 包括 X 行 1 列 的 以 列表 方式 的 买 二 人 
排列 的 商品 细节 大 图 片 。 仙人 人 人 
商品 详细 信息 显示 区 UI 设计 效果 如 图 14. 8 所 示 。 








3. 购物 车 页 面 
购物 车 页 面 用 于 显示 购物 车 中 的 信息 ,主要 包含 导航 
区 、 购 物 车 商品 信息 区 。 特价 4 全 全 国 包 邮 Y9.88 
已 售 出 3084 笔 





(1) 导航 区 : 位 于 页 面 顶部 ,用 于 显示 网 站 中 的 其 他 模 
块 链接 ,与 商城 首页 的 “网 站 导航 区 ”内 容 一 致 ,如 图 14. 1 








所 示 。 
(2) 购物 车 商品 信息 区 : 位 于 页 面 中 间 , 用 于 显示 购物 1 

车 内 的 商品 信息 ,从 上 至 下 包括 X 行 1 列 的 以 列表 方式 排列 购 菏 包 邮 马 来 西 下 进口 

的 购物 车 商品 展示 单元 。 每 个 展示 单元 都 包括 商品 缩 略图 

片 .商品 名 称 、 商 品 描述 、 商 品 单价 .商品 数量 .商品 金额 、 图 14.7 热卖 商品 排行 榜 

操作 。 UI 设计 效果 
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【100% 越 南 TRUNG NGUYEN 原装 进口 中 原 57 咖 啡 】 天 猫 正品 保证 ! 


中 原 67 匣 啡 小 知识 店 所 售 中 英文 版 】 中 原 67 色 啡 系列 是 出 口 装 中 英文 版 

口 的 生产 线 生产 、 保 证 高 品质 生产 原材料 、 稳 定 生产 工艺 流程 及 符合 国际 食品 卫生 ; 

| 替 T1~T7 各 条 生产 线 生产 的 咖啡 ， i 本 国 食品 卫生 标准 。 中 原 G7 听 啡 进入 国际 市 场 
感 上 会 跟 越 文 版 有 微小 差异 ， 熟知 了 解 
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图 14.8 商品 详细 信息 显示 区 UI 设计 效果 


购物 车 商品 信息 区 UI 设计 效果 如 图 14. 9 所 示 。 
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图 14.9 购物 车 商品 信息 区 UI 设计 效果 
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4 我 的 订单 页 面 


我 的 订单 页 面 用 于 展示 订单 信息 ,主要 包含 导航 区 、 链 接 区 、 订 单 信息 显示 区 。 

(1) 导航 区 : 位 于 页 面 顶 部 ,用 于 显示 网 站 中 的 其 他 模块 链 
接 , 与 商城 首页 的 “网 站 导航 区 ?内容 一 致 ,如 图 14. 1 所 示 。 

(2) 链接 区 : 位 于 页 面 左 侧 ,用 于 显示 各 种 操作 链接 ,包括 我 
的 购物 车 ,已 买 到 的 宝贝 我 的 收藏 ,我 的 积分 、 我 的 优惠 、 退 款 
维权 。 

链接 区 UI 设计 效果 如 图 14. 10 所 示 。 

(3) 订单 信息 显示 区 : 位 于 页 面 右 侧 ,用 于 显示 订单 详细 信 
息 ,从 上 至 下 包括 XX 行 1 列 的 以 列表 方式 排列 的 订单 商品 展示 单 14. 10 链接 区 UI 
元 。 每 个 显示 单元 包括 商品 缩 略 图 片 、 商 品名 称 、 商 品 单价 、 商 品 设计 效果 
数量 、 商 品 操作 、 实 付款 、 交 易 状 态 、 交 易 操 作 。 

订单 信息 显示 区 UI 设计 效果 如 图 14. 11 所 示 。 





所 有 订单 | 特 付款 0 | 待 发 货 0 | 待 收 货 0 





园 全 选 宝贝 单价 元 ) 数量 商品 操作 实 付 款 元 ) 交易 状态 交易 操作 





Nestie 沁 痕 咯 g 非 90.50 95.50 
1+2 特 ; 当 过 党 咖啡 投诉 卖家 ( 含 运 更 5.0) 。 订单 详情 

粉 三 合 一 90 条 装 即 Be 
冲 包 由 coffee 










85.50 
投诉 卖家 人 售 运 费 5.0) 。 订单 详情 


Nestle 省 巢 记 茂 系 
列 速 滑 啡 粉丝 油 
拿 铁 12 条 3 便 组 合 
装 包 邮 












14.11 订单 信息 显示 区 UI 设计 效果 


143 网 页 制作 


本 节 介绍 咖啡 销售 网 站 各 个 页 面 的 实现 过 程 。 巾 于 之 前 各 章 中 已 经 介绍 了 本 综合 项 
目的 各 个 功能 模块 的 关键 功能 或 动态 效果 的 实现 代码 ,因此 在 本 节 有 关 动 态 效果 实现 部 
分 不 再 袭 述 , 这 里 仅 列 出 各 个 页 面 的 结构 和 布局 代码 。 

首先 ,创建 本 项 目 根 目录 文件 夹 * 咖 啡 销售 网 站 设计 ”, 在 根 目录 下 分 建 css js \image 
目录 ,分 别 用 于 存放 本 项 目 中 用 到 的 CSS 文件 .JS 文件 和 图 片 资源 。 

本 项 目 使 用 的 CSS 文件 coffee. css 存放 于 项 目 根 目录 下 的 css 目录 中 。 

下 面 分 别 实现 14. 2 节 UI 设计 完毕 的 HTML 页 面 。 


区 全 和 富 网 汪 约 合 鲍 症 


1. 商城 首页 


在 项 目 根 目 录 下 创建 “商城 首页 . html”。 在 一 head 之 中 导入 本 页 面 需要 使 用 的 外 部 
CSS 文件 ,使 用 如 下 语句 。 


<link href= "css/coffee.css" rel= "stylesheet" type= "text/css"> 


(1) 网 站 导航 区 。 
Q@ 用 户 通用 功能 链接 区 ,包括 用 户 “ 登 录 ”“ 人 免费 注册 ”链接 ,“ 我 的 订单 "链接,“ 购 物 
车 ”链接 ,“ 帮 助 中 心 ”链接 等 。 这 里 需要 使 用 二 a 二 标签 制作 超 链接 ,关键 代码 如 下 。 


<div id= "topnav"> 
<ul> 
<1i id="loginbar"> 
<span> 您 好 ,游客 您 好 ! 欢迎 来 到 咖啡 驿 < /span> 
<a href="" onClick= "login()"> [登录 ]< /a> gnbsp; 
<a href="" onClick= "reg()"> [免费 注册 ]</a></li> 
<1i><a href= "#"> 我 的 订单 < /a></1i> 
<1i><a href= 哇 " target=" blank"> 购 物 车 </a></1i> 
<1i> 帮 助 中 心 </1i> 
</ul> 
</div> 


@ 网 站 搜索 操作 区 ,包括 网 站 Logo 图 标 、 站 内 商品 搜索 框 、 购 物 车 按钮 “我 的 驿 吧 ” 
按钮 。 这 里 需要 使 用 二 form 二 标签 制作 搜索 文本 框 和 按钮 ,关键 代码 如 下 。 





<div class="search"> 
<div> 
<a href="#" hidefocus= "true">< img width="150px" src="image/site logo.jpg"></ 
a> 
</div> 
<div id= "searchForm"> 
<div class= "form"> 
< form method= "GET" action=""> 
< input type= "text" class= "text" name= "keyword" autocomplete= 
WOERE > 
<input type= "submit" class= "button" value= "搜索 " hidefocus= 
ER > 
</form> 
</div> 
</div> 
<div id= "mycoffee"> 
<dl><dt><a href=""> 我 的 驿 吧 </a>< /dt>< /dl> 
</div> 
<div id- "mycart"> 


HivMLs+csse+Javaserht 顺 由 四 映 


<qdl><dt><a href="" class="buy”> 购 物 车 <strong> 0< /strong> 种 商品 </a></dt> 
</dl> 
</div> 
</div> 


@ 网 站 各 模块 导航 条 区 ,包括 “商城 首页 ”链接 “商品 分 类 ”链接 “商品 详情 ”链接 。 
这 里 仍 主要 使 用 =a 二 标签 制作 超 链接 ,关键 代码 如 下 。 


<div class= "nav"> 
<div id= "categorys"> 
<div><h2><a href=""> 全 部 商品 分 类 <b></b></a></h2></div> 
</div> 
<ul> 
<1i><a href=" 商 城 首页 .html"> 首 页 < /a>< /1i> 
<1i><a href="#"> 商 品 分 类 < /a></1i> 
<1i><a href="#" target= "” blank"> 商 品 详情 < /a>< /1i> 
</ul> 
</div> 


(2) 商品 分 类 区 : 位 于 首页 面 的 左 侧 , 从 上 至 下 依次 用 于 展示 咖啡 商品 大 类 名 称 链 
接 、 咖 啡 商品 小 类 名 称 链接 。 
@ 咖啡 商品 大 类 名 称 链接 ,如 白 咖 啡 .咖啡 器 具 ,咖啡 原料 .咖啡 辅料 .咖啡 壶 等 。 
@ 咖啡 商品 小 类 名 称 链接 ,如 
咖啡 大 类 下 ,包含 咖啡 豆 .咖啡 生 豆 有 机 咖啡 ,咖啡 胶 襄 等 ; 
咖啡 器 具 大 类 下 ,包含 奶 泡 壶 \ 压 粉 器 \ 磅 粉 盒 、 滤 纸 /滤器 / 滤 布 / 滤 杯 、 光 波 炉 等 ; 
咖啡 原料 大 类 下 ,包含 咖啡 粉 . 速 溶 咖啡 粉 ` 纯 咖啡 粉 等 。 
注意 : 这 里 的 二 div id 一 "main" 之 容器 需要 包含 “商品 分 类 区 交 商 品 展示 区 ”和 “新 闻 
广告 区 ”3 个 区 域 ,关键 代码 如 下 。 
<div id= "main"> 
<!-- 商 品 分 类 区 --> 
<div class= "left"> 
<div class="assort "> 
<dl> 
<dt><a href=""> 白 咖啡 < /a>< /dt> 
<dd><a href=""> 大 马 白 咖啡 < /a> 


l<a href=""> 白 咖啡 </a></dd> 
</dl> 


</div> 
</div> 
</div> 
(3) 商品 展示 区 : 位 于 首页 面 中 间 , 从 上 至 下 依次 用 于 展示 幻灯 图 片 公告 展示 区 、 商 
品 列表 展示 区 。 
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@ 幻灯 图 片 公告 展示 区 ,由 一 组 图 片 以 幻灯 片 方式 播放 ,用 于 展示 网 站 中 的 重要 公 
告 消息 、 广 告 等 。 

@ 商品 列表 展示 区 ,从 上 至 下 包括 X 行 Y 列 的 以 列表 方式 排列 的 商品 展示 单元 ,每 
个 展示 单元 由 商品 图 片 、 商 品 价格 和 售 出 件数 构成 。 

这 一 部 分 需要 放 在 “商品 分 类 区 ”所 在 的 二 div id="main" 二 二 /div 之 中 ,关键 代码 
如 下 。 





<div id= "main"> 


<!-- 商 品 分 类 区 --> 


<!-- 商 品 展示 区 --> 

3 i hh 

<div class= "middle"> 
<div id= "notice"> 
<!-- 幻 灯 图 片 公告 展示 区 --> 
<div id="ad cycle"> 


</div>< !--end ad cycle -一 > 
</div>< !--end notice- -> 
< 上 -商品 列表 展示 区 --> 
<!--queue --—> 
<div id= "queue"> 
<div class= "que"> 
<div class="que-1"> 
<a href="#">< img src= "image/taobao/1.jpg_.webp" 
align= "absmiddle">< /a> 
<p>【 热 销 36 万 特价 全 国 包 邮 了 3 越南 原装 进口 3 合 1 中 原 gq7 速溶 咖啡 800g< /p> 
</div> 
<div class= "que- 2">¥32.99< /div> 
<span class= "que- 3"> 已 售 出 <em> 366699< /em> 件 < /span> 
</div> 


</div><!--end queue- -> 
</div><!--end middle--> 


</div><!--end main--> 


(4) 新 闻 广 告 区 : 位 于 首页 面 右 侧 , 从 上 至 下 依次 用 于 展示 咖啡 快报 区 .广告 区 。 

@ 咖啡 快报 区 ,显示 快报 标题 链接 ,以 4 行 2 列 的 列表 方式 排列 快报 标题 。 左 侧 提 
供 “ 更 多 快报 "链接 。 

@ 广告 区 ,用 于 展示 网 站 招标 、 活 动 、 优 惠 等 广告 宣传 图 片 ,从 上 至 下 排列 ,以 X 行 1 
列 的 列表 方式 排列 广告 图 片 。 

这 一 部 分 仍 需 要 放 在 “商品 分 类 区 ”所 在 的 二 div id= "main" 二 二 /div 之 中 ,关键 代码 
如 下 : 
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<div id- "main"> 
<!-- 商 品 分 类 区 --> 


< 上 -商品 展示 区 --> 


< 于 -新 闻 广 告 区 --> 
<div class= "right"> 
<div id= "coffeenews"> 


<div class= "mt"> 


<h2> 咖 啡 快报 < /h2> 

<div><a href="" target="”blank"> 更 多 快报 gnbsp; &gt;< /a>< /div> 
</div> 
<div class= "mc"> 

<ul> 


<1i><a href="#" title= "咖啡 师 人 才 服 务 "> 咖啡 师 人 才 服 务 < /a>< /1i> 


</ul> 
</div> 
</div>< !- -end coffeenews---> 
<div id= "video"> 
<video src="image/monin.mp4" style="border:10px solid black;margin:10px 0;" 
width= 290px autoplay controls> 


浏览 器 不 支持 video< /video> 
</div> 
ER 一 一 Gd 一 一 一 > 


</div>< !- -end main- 一 > 


(5) 页 脚 区 : 位 于 首页 面 底部 ,从 左 至 右 依 次 用 于 展示 “网 站 地 图 "链接 “关于 我 们 ” 
链接 “沙龙 动态 ”链接 “友情 链接 ”链接 “联系 我 们 ”链接 “版 权 声明 ”链接 “会 员 登 录 ” 
按钮 “会 员 注册 ”按钮 等 。 





关键 代码 如 下 。 
<!-- 页 脚 区 --> 
<footer> 


<div class= "footer"> 

<a href="#" target=" blank"> 网 站 地 图 < /a>/ 

<a target=" blank" href="#"> 关 于 我 们 < /a>/ 

<a target=" blank" href="#"> 沙 龙 动态 < /a>/ 

<a target=" blank" href="#"> 友 情 链接 < /a> / 

<a target=" blank" href=#"> 联 系 我 们 </a>/ 

<a target=" blank" href= 叶 "> 版 权 声 明 < /a> 

<a target=" blank" class= "login" href=""> 会 员 登 录 < /a> 

<a target=" blank" class= "register" href=""> 会 员 注 册 < /a> 
</div> 


第 4 密 网 赴约 合 县 全 


<div class= "copyright"> 
<p><a href="" target=" blank"> 咖 啡 销售 网 < /a> <br> 
Copyright © 2018 All Rights Reserved.< /p> 
</div> 
</div> 


< /footer> 
2. 商品 详情 页 面 


商品 详情 页 面 用 于 显示 商品 的 详细 信息 ,主要 包含 导航 区 、 商 品 购买 区 、 热 卖 商品 排 
行 榜 、 商 品 详细 信息 显示 区 。 

(1) 导航 区 : 位 于 页 面 顶部 ,用 于 显示 网 站 中 的 其 他 模块 链接 。 

具体 实现 代码 与 商城 首页 中 的 导航 区 基本 类 似 , 在 此 不 再 袭 述 。 

(2) 商品 购买 区 : 位 于 页 面 中 间 , 用 于 显示 商品 购买 操作 信息 ,从 左 至 右 依 次 展示 商 
品 图 片区 ,商品 购买 区 ,商品 缩 略 图 区 。 

Q@ 商品 图 片区 ,商品 外 观 大 图 。 

@ 商品 购买 区 ,从 上 至 下 依次 展示 商品 名 称 、 商 品 简介 、 商 品 价格 、 商 品 单位 价格 、 邮 
费 “ 立 刻 购买 "和 “加 入 购物 车 ”按钮 。 

@ 商品 缩 略 图 区 ,从 上 至 下 依次 展示 商品 细节 小 图 。 

商品 购买 区 代码 也 需要 放 在 最 外 层 容 器 二 div id 一 "main" 过 中 ,关键 代码 如 下 。 


<div id= "main"> 
<div id= "top"> 
<div class="left"> 
<div> 
<canvas id= "canvasl" width= "360px" height= "360px">< /canvas> 
<canvas id= "canvas2" width= "200px" height= "200px">< /canvas> 
</div> 
<div id="ULlist"> 
<ul> 
<1i onMouseOver= "changePic (this)"><a href="#"> 
<img id="first img" src= "image/taobao/detail/1.jpg"></a></1Li> 
<1i onMouseOver= "changePic (this)"><a href="#"> 
< img src= "image/taobao/detail/2.jpg"></a></li> 
<1i onMouseOver= "changePic (this)"><a href="#"> 
< img src= "image/taobao/detail/3.jpg" ></a></li> 
<1i onMouseOver= "changePic (this)"><a href="#"> 
< img src= "image/taobao/detail/4.jpg"></a></li> 


</ul> 
</div><!---end ULList- 一 一 > 
deEFt==== 王 


<div class= "right"> 


< img src= "image/pic/2.jpg" width= "160" height= "160" border= "0"> 
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< img src= "image/pic/3.jpg" width= "160" height= "160" border= "0"> 
< img src= "image/pic/4.jpg" width= "160" height= "160" border= "0"> 
</div><!---end right---> 
</div><!---end top- 一 > 


</div>< !-end main -一 > 


(3) 热卖 商品 排行 榜 : 位 于 页 面 左 侧 ,用 于 显示 热卖 商品 信息 ,从 上 至 下 以 X 行 1 列 
的 列表 方式 排列 展示 单元 ,每 个 展示 单元 由 商品 图 片 、 商 品 简介 、 商 品 价格 和 售 出 件数 
构成 。 

热卖 商品 排行 榜 代码 也 需要 放 在 最 外 层 容器 二 div id 一 "main "之 中 ,关键 代码 如 下 。 


<div id= "main"> 


<div id= "mid- bottom"> 
<div class= "rank"> 
<span style="color :red"> 热 卖 商品 排行 榜 < /span> 
<ul> 
<1i>…</1i> 
<Ll><yIi> 
</ul> 
</div> 
</div>< !--end mid-bottom- 一 > 
</div><!---end div main---> 


(4) 商品 详细 信息 显示 区 : 位 于 页 面 中 间 , 用 于 显示 商品 详细 信息 ,从 上 至 下 依次 展 
示 商 品 详情 介绍 文字 、 商 品 细节 大 图 。 

@ 商品 详情 介绍 文字 。 

@ 商品 细节 大 图 。 

热卖 商品 排行 榜 代码 也 需要 放 在 最 外 层 容器 二 div id 二 "main" 二 中 ,并 且 还 需要 放 在 
热卖 商品 排行 榜 所 在 的 二 div id 一 "mid-bottom" 之 中 ,关键 代码 如 下 。 

<div id= "mid- bottom"> 

<!-- 热卖 商品 排行 榜 --> 


<!-- 商品 详细 信息 显示 区 --> 

<div class="detail"> 
<p style= "color:red"> 商 品 详情 < /p> 
<p>【100% 越 南 TRUNG NGUYEN 原装 进口 中 原 67 咖啡 天 猫 正品 保证 ! < /p> 
<P>…</p> 
< img src= "image/pic/7.jpg" width= "735" border= "0" alt=""> 
< img src= "image/pic/8.jpg" width= "735" border= "0" alt=""> 

</div> 

</div><!-—-end mid-bottom- 一 > 
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3. 购物 车 页 面 


购物 车 页 面 用 于 显示 购物 车 中 的 信息 ,主要 包含 导航 区 购物 车 商品 信息 区 。 

(1) 导航 区 : 位 于 页 面 顶部 ,用 于 显示 网 站 中 的 其 他 模块 链接 。 

具体 实现 代码 与 商城 首页 中 的 导航 区 基本 类 似 , 在 此 不 再 缆 述 。 

(2) 购物 车 商品 信息 区 : 位 于 页 面 中 间 , 用 于 显示 购物 车 内 的 商品 信息 ,从 上 至 下 以 
X 行 1 列 的 列表 方式 排列 ,每 个 显示 单元 都 包括 商品 缩 略 图 片 、 商 品名 称 、 商 品 描述 、 商 品 
单价 、 商 品 数量 、 商 品 金额 ,操作 。 

需要 将 购物 车 商品 信息 区 代码 放 在 最 外 层 容器 二 div id 一"container" 之 中 ,关键 代码 
疯 丰 各 


< !-- 购 物 车 商品 信息 区 --> 
<div class= "middle"> 
<div style= "text— align:center;margin:10px;"> 
<div> 
< input type= "checkbox" name= "selectAll" onchange= "checkAll (event) "> 
全 选 商 品 信息 < /div> 
<div> xxxxx< /div> 
<div> 单 价 (元 )< /div> 
<div> 数 量 < /div> 
<div> 金 额 (元 )< /div> 
<div> 操 作 < /div> 
</div> 
<form id="]list"> 
< ! 一 购物 车 第 一 个 商品 显示 单元 --> 
<div class= "unit"> 


<div class= "unit1l"> 


</div> 
</div><!--end unit -一 > 
</div> 
< /form> 
<div style= "text- align:right;"> 
已 选 商品 < span style= "font- size:2em; color:#d269le;font- weight:bolder" 
id= "piece"> 0< /span> 件 
合计 (不 含 运费 )< span style= "font- size:2emicolor:#d269le;font- weight: 
bolder"> 
至 < span id= "money"> 0< /span></span> 
<ahref=""> 
<div style=- "display:inline- block;width:120px;height :30px;background: 
#d2691e; 
font- size:20px; color:white;font-weight:bold;font- family: 黑 体 ; 
text-align:center;padding:10px"> 结 算 < /div></a> 
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</div> 


</div><!-—-endmiddle -一 > 

4 我 的 订单 页 面 

我 的 订单 页 面 用 于 展示 订单 信息 ,主要 包含 导航 区 ,链接 区 、 订 单 信息 显示 区 。 

(1) 导航 区 : 位 于 页 面 顶部 ,用 于 显示 网 站 中 的 其 他 模块 链接 。 

其 具体 实现 代码 与 商城 首页 中 的 导航 区 基本 类 似 ,在 此 不 再 袭 述 。 

(2) 链接 区 : 位 于 页 面 左 侧 , 用 于 显示 各 种 操作 链接 ,从 上 至 下 以 X 行 1 列 的 列表 方 
式 排列 ,包括 我 的 购物 车 ,已 买 到 的 宝贝 .购买 过 的 店铺 、 我 的 收藏 ,我 的 积分 、 我 的 优惠 、 
退 款 维权 。 

关键 代码 如 下 。 


<div class= "middle"> 
< !-- 链 接 区 --> 
<div class= "left"> 
<ul> 
<1i><a herf=""> 我 的 购物 车 < /a>< /1i> 
<1i><a herf=""> 已 买 到 的 宝贝 </a>< /1i> 
<1i><a herf=""> 购 买 过 的 店铺 </a>< /1i> 
<1i><a herf=""> 我 的 收藏 < /a>< /1i> 
<1i><a herf=""> 我 的 积分 < /a>< /1i> 
<1i><a herf=""> 我 的 优惠 < /a>< /1i> 
<1i><a herf=""> 退 款 维权 < /a>< /1i> 
</ul> 
</div> 
</div> 


(3) 订单 信息 显示 区 : 位 于 页 面 右 侧 , 用 于 显示 订单 的 详细 信息 ,从 上 至 下 以 X 行 1 
列 的 列表 方式 排列 ,每 个 显示 单元 包括 商品 缩 略 图 片 、 商 品名 称 、 商 品 单价 商品 数量 、 商 
品 操作 、 实 付款 、 交 易 状 态 、 交 易 操 作 。 需 要 将 订单 信息 显示 区 代码 放 在 链接 区 所 在 容器 
二 div id 一 "middle" 二 中 ,关键 代码 如 下 。 





<div class= "middle"> 
< 上 -链接 区 --> 


<!-- 订 单 信息 显示 区 --> 

<div class="right"> 
<div style= "color:gray; font- size:20px;font- family: 黑 体 ; 
padding- left:20px;border- bottom:solid lpx gray;padding:10px;"> 
所 有 订单 | 待 付款 1 待 发 货 | 待 收 货 
</div> 
<div style= "background:1lightgray;padding:10px;margin- top:10px; 
font:12px; 
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text- align:center;"> 
<div> 商 品名 称 < /div> 
<div> 商 品 单价 (元 )< /div> 
<div> 商 品 数量 < /div> 
<div> 商 品 操作 < /div> 
<div> 实 付款 (元 )< /div> 
<div> 交 易 状 态 < /div> 
<div> 交 易 操 作 < /div> 
</div> 
< input type= "checkbox" name= "selectAl1" onchange= "checkRl1l () "> 全 选 
<div class= "order"> 
<div> 
< input type= "checkbox" name= "order"> 2017- 3- 22 
订单 号 : 782212652390776 
</div> 
<div> 
< img src= "image/pic/1i/6.jpg" width= "80" height= "80" border= "0" 
alt=""> 
<div style= "width:100px;display:inline- block;margin- left:10px; 
vertical-align:top;"> 
<a href="" alt=""> 特 卖 80 后 记忆 龙 须 糖 龙 须 酥 龙眼 上 海 新 疆 特 产 < /a> 
</div> 
</div> 
<div>10.50< /div> 
<div>1< /div> 
<div><a href=""> 退 款 / 退 货 < /a><br><a href=""> 投 诉 卖家 < /a>< /div> 
<div>15.50<br> ( 含 运费 5.0)< /div> 
<div> 卖 家 已 发 货 <br><ahref=""> 订 单 详情 </a>< /div> 
<div> 确 认 收 货 < /div> 
<div></div> 
</div> 
</div><!--end right --> 
</div><!--endmiddle --> 
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学 习 知 识 点 及 能 力 要 点 


A1 教材 的 知识 要 点 及 掌握 程度 


本 教材 的 知识 要 点 及 掌握 程度 如 下 表 所 示 。 




































































序号 单元 标题 知识 要 点 掌握 程度 

HTML 语法 介绍 了 解 
HTML 常用 标签 运用 

1 HTML 基础 
表格 元 素 运用 、 分 析 
表单 元 素 运用 、 分 析 

村 新 增 文档 结构 元 素 了 解 

2 HTML5 新 增 元 素 和 属性 二 = 
新 增 表单 元 素 运用 
CSS 选择 符 运用 

3 CSS 基础 文本 和 字体 相关 属性 了 解 . 运 用 
背景 和 边框 相关 样式 了 解 . 运 用 
盒子 相关 属性 运用 
浮动 定位 运用 、 分 析 

4 CSS 盒子 模型 
位 置 定 位 运用 、 分 析 
display 属性 运用 、 分 析 
Animation 动画 运用 

5 CSS3 动画 
Transition 过 渡 运用 
认识 JavaScript 了 解 
JavaScript 函数 运用 
事件 和 事件 处 理 运用 、 分 析 

6 JavaScript 基础 
内 置 对 象 运用 
BOM 对 象 运用 
DOM 对 象 运用 ,分 析 
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续 表 
序号 单元 标题 知识 要 点 掌握 程度 
绘制 基本 图 形 运用 
7 Canvas 画布 
绘制 图 像 运用 
Web Storage 运用 、 分 析 
8 本 地 存储 
本 地 数据 库 运用 、 分 析 
JSON 了 解 . 运 用 
9 JSON 和 Ajax 
Ajax 了 解 、. 运 
MUI 框 架 运用 、 分 析 
10 跨 平 台 移 动 App 开发 
HTML H5 十 API 调 用 运用 、 分 析 
项 目 构思 运用 
11 网 站 综合 设计 UI 设 计 运用 、 分 析 
网 页 制作 运用 、 分 析 











A2 教材 的 能 力 要 点 及 重要 程度 


本 教材 的 能 力 要 点 及 重要 程度 如 下 表 所 示 。 

















目标 内 容 培养 能 力 掌握 程度 具体 描述 
人 文 社会 科学 | 运用 “| 具有 良好 的 政治 素养 和 道德 情操 ,符合 社会 行业 及 对 高 素质 
知识 软件 人 才 的 预期 要 求 
理论 知识 熟练 使 用 CSS JavaScript .HTML5 编写 代码 ;熟悉 HBuilder 
专业 知识 运用 “| 等 工具 完成 界面 设计 和 制作 ; 热 悉 基 于 CSS 十 DIV 架构 的 页 
面 ;熟悉 H5 十 手机 App 的 开发 .打包 和 发 布 
系统 的 显现 和 | ”天 解 “| 识别 系统 表现 的 行为 和 功能 特性 ;掌握 人 机 交互 工程 设计 原 
交互 作用 则 ;熟悉 软件 用 户 操作 习惯 和 常见 需求 
掌握 根据 业务 特点 和 客户 需求 ,选择 系统 开发 技术 、 设 计 系统 
专业 技能 | 分 析 问题 识 记 ”| 体系 结构 的 方法 ;对 软件 系统 开发 中 的 理论 性 和 操作 性 问题 
具有 一 定 的 分 析 能 力 
讷 人 大计 帮 而 大 具有 综合 运用 软件 开发 技术 进行 系统 的 创造 性 开发 能 力 ; 根 
计生 评价 “| 据 软 件 规模 的 大 小 和 复杂 度 , 选 择 软件 开发 过 程 和 方法 的 
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英文 代码 形 像 颜色 HEX 格式 RGB 格式 
LightPink 浅 粉红 #FFB6C1 255,182,193 
Pink 粉红 #FFCOCB 255,192,203 
Crimson 猩 红 # DC143C 220,20,60 
LavenderBlush 脸红 的 淡 紫 色 #FFFOF5 255,240,245 
PaleVioletRed 苍白 的 紫罗兰 红色 # DB7093 219,112,147 
HotPink 热情 的 粉红 #FF69B4 255,105,180 
DeepPink 深 粉 色 井 FF1493 255,20,147 
MediumVioletRed 适中 的 紫罗兰 红色 #C71585 199,21,133 
Orchid 兰花 的 紫色 # DA70D6 218,112,214 
Thistle 葡 #D8BFD8 216,191,216 
plum 李子 #DDAODD 221,160,221 
Violet 紫罗兰 # EE82EE 238,130,238 
Magenta 洋红 # FFOOFF 255,0,255 
Fuchsia 灯笼 海 棠 (紫红 色 ) # FFOOFF 255,0,255 
DarkMagenta 深 洋红 色 #8B008B 139,0,139 
Purple 紫色 #800080 128,0,128 
MediumOrchid 适中 的 兰花 紫 #BA55D3 186,85,211 
DarkVoilet 深 紫 罗兰 色 #9400D3 148,0,211 
DarkOrchid 深 兰花 紫 #9932CC 153,50,204 
Indigo 靛青 #4B0082 75,0,130 
BlueViolet 深 紫罗兰 的 蓝 色 #8A2BE2 138,43,226 
MediumPurple 适中 的 紫色 #9370DB 147,112,219 
MediumSlateBlue 适中 的 板 岩 暗 蓝 灰色 #7B68EE 123,104,238 
SlateBlue 板 岩 暗 蓝 灰色 #6A5ACD 106,90,205 
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续 表 

英文 代码 形 像 颜 色 HEX 格式 RGB 格式 
DarkSlateBlue 深 岩 暗 蓝 灰色 #483D8B 72,61,139 
Lavender 草 衣 草花 的 淡 紫 色 井 E6E6FA 230,230,250 
GhostWhite 幽灵 的 白色 #F8F8FF 248,248,255 
Blue 纯 蓝 #0000FF 0,0,255 
MediumBlue 适中 的 蓝 色 #0000CD 0,0,205 
MidnightBlue 午夜 的 蓝 色 #191970 25,25,112 
DarkBlue 深蓝 色 #00008B 0,0,139 
Navy 海军 蓝 并 000080 0,0,128 
RoyalBlue 皇 军 蓝 #4169El 65,105,225 
CornflowerBlue 矢 车 菊 的 蓝 色 #6495ED 100,149,237 
LightSteelBlue 淡 钢 蓝 #BOC4DE 176,196,222 
LightSlateGray 浅 石 板 灰 井 778899 119,136,153 
SlateGray 石板 灰 井 708090 112,128,144 
DoderBlue 道奇 蓝 #1E90FF 30,144,255 
AliceBlue 爱丽 丝 蓝 # FOF8FF 240,248,255 
SteelBlue 钢 蓝 #4682B4 70,130,180 
LightSkyBlue 淡 蓝 色 #87CEFA 135,206,250 
SkyBlue 天 蓝 色 #87CEEB 135,206,235 
DeepSkyBlue 深 天 蓝 #00BFFF 0,191,255 
LightBLue 淡 蓝 # ADD8E6 173,216,230 
PowDerBlue 火药 蓝 # BOEOE6 176,224,230 
CadetBlue 军校 蓝 #5F9EAO 95,158,160 
Azure 蔚蓝 色 # FOFFFF 240,255,255 
LightCyan 淡 青 色 # ElFFFF 225,255,255 
PaleTurquoise 苍白 的 绿 宝石 # AFEEEE 175,238,238 
Cyan 青色 #00FFFF 用 1255;255 
Aqua 水 绿色 #00FFFF 0,255,255 
DarkTurquoise 深 绿 宝石 #00CED1 0,206,209 
DarkSlateGray 深 石板 灰 #2F4F4F 47,79,79 
DarkCyan 深 青 色 #008B8B 0,139,139 
Teal 水 鸭 色 井 008080 0,128,128 
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续 表 

英文 代码 形 像 颜色 HEX 格式 RGB 格式 
英文 代码 形 像 颜色 HEX 格式 RGB 格式 
Medium Turquoise 适中 的 绿 宝石 #48DI1CC 72,209,204 
LightSeaGreen 浅海 洋 绿 #20B2AA 32,178,170 
Turquoise 绿 宝石 #40E0DO 64,224,208 
Auqamarin 绿 玉 / 碧 绿色 #7FFFAA 127,255,170 
MediumAquamarine 适中 的 碧绿 色 #00FA9A 0,250,154 
MediumSpringGreen 适中 的 春天 的 绿色 #F5FFFA 245,255,250 
MintCream 薄荷 奶油 #00FF7F 05255,127 
SpringGreen 春天 的 绿色 # 井 3CB371 60,179,113 
SeaGreen 海洋 绿 #2E8B57 46,139,87 
Honeydew 蜂蜜 #FOFFF0 240,255,240 
LightGreen 淡 绿 色 #90EE90 144,238,144 
PaleGreen 苍白 的 绿色 #98FB98 152,251,152 
DarkSeaGreen 深海 洋 绿 #8FBC8F 143,188,143 
LimeGreen 酸 橙 绿 #32CD32 50,205,50 
Lime 酸 橙色 #00FF00 0,255,0 
ForestGreen 森林 绿 #228B22 34,139,34 
Green 纯 绿 井 008000 0,128,0 
DarkGreen 深 绿色 井 006400 0,100,0 
Chartreuse 查 特 酒 绿 #7FFFO00 127,255,0 
LawnGreen 草坪 绿 #7CFC00 124,252,0 
GreenYellow 绿 黄色 # ADFF2F 173,255,47 
OliveDrab 橄榄 土 褐色 #556B2F 85,107,47 
Beige 米色 ( 浅 褐色 ) #6B8E23 107,142,35 
LightGoldenrodYellow | ” 浅 秋 麒 麟 黄 #FAFAD2 250,250,210 
Ivory 象牙 #FFFFFO 255,255,240 
LightYellow 浅黄 色 井 FFFFE0 25552555224 
Yellow 纯 黄 # FFFFO00 255,255,0 
Olive 橄榄 #808000 128,128,0 
DarkKhaki 深 卡其 布 # BDB76B 189,183,107 
LemonChiffon 柠檬 薄 纱 #FFFACD 255,250,205 
PaleGodenrod 灰 秋 鹿 麟 #EEE8AA 238,232,170 
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续 表 

英文 代码 形 像 颜色 HEX 格式 RGB 格式 
Khaki 卡其 布 #FOE68C 240,230,140 
Gold 金 #FFD700 255521550 
Cornislk 玉米 色 # FFF8DC 255,248,220 
GoldEnrod 秋 鹿 麟 #DAA520 218,165,32 
FloralWhite 花 的 白色 #FFFAFO0 255,250,240 
OldLace 老 饰 带 # FDF5E6 253,245,230 
Wheat 小 麦 色 #F5DEB3 245,222,179 
Moccasin 鹿 皮 鞋 # FFE4B5 255,228,181 
Orange 橙色 井 FFA500 255,165,0 
PapayaWhip 番 木 瓜 # FFEFD5 255,239,213 
BlanchedAlmond 漂白 的 杏仁 #FFEBCD 255,235,205 
NavajoWhite Navajo 白 #FFDEAD 255,222,173 
AntiqueWhite 古代 的 白色 #FAEBD7 250,235,215 
Tan 晒 黑 # D2B48C 210,180,140 
BrulyWood 结实 的 树 # DEB887 222,184,135 
Bisque ( 浓 汤 ) 和 乳脂 ,番茄 等 #FFE4C4 255,228,196 
DarkOrange 深 橙色 #FF8C00 255,140,0 
Linen 亚麻 布 #FAFOE6 250,240,230 
Peru 秘鲁 # CD853F 205,133,63 
PeachPuff 桃色 #FFDAB9 255,218,185 
SandyBrown 沙 棕 色 井 F4A460 244,164,96 
Chocolate 巧克力 #D2691E 210,105,30 
SaddleBrown 马鞍 棕色 #8B4513 139,69,19 
SeaShell 海 贝壳 #FFF5EE 255,245,238 
Sienna 黄土 灰色 # A0522D 160,82,45 
LightSalmon 浅 鲜 肉 ( 甸 鱼 ) 色 #FFA07A 255,160,122 
Coral 珊瑚 #FF7F50 255,127,80 
OrangeRed 橙 红 色 ##FF4500 255,69,0 
DarkSalmon 深 鲜 肉 ( 钾 鱼 ) 色 #E9967A 233,150,122 
Tomato 番茄 #FF6347 255,99,71 
MistyRose 薄 雾 玫瑰 #FFE4El 255,228,225 
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续 表 

英文 代码 形 像 颜色 HEX 格式 RGB 格式 
Salmon 鲜 肉 ( 甸 鱼 ) 色 #FA8072 250,128,114 
Snow 雪 #FFFAFA 255,250,250 
LightCoral 淡 珊 瑚 色 井 F08080 240,128,128 
RosyBrown 玫瑰 棕色 # BC8F8F 188,143,143 
IndianRed 印度 红 #CD5C5C 205,92,92 
Red 纯 红 #FF0000 255,0,0 
Brown 棕色 #A52A2A 165,42,42 
FireBrick 耐火 砖 # B22222 178,34,34 
DarkRed 深 红色 #8B0000 139,0,0 
Maroon 栗色 #800000 128,0,0 
White 纯 白 #FFFFFF 255,255,255 
WhiteSmoke 白 烟 #F5F5F5 245,245,245 
Gainsboro 亮 灰 # DCDCDC 220,220,220 
LightGrey 浅 灰色 # D3D3D3 3012 20 
Silver 银白 色 #CoCOCO 192,192,192 
DarkGray 深 灰 色 #A9A9A9 169,169,169 
Gray 灰色 # 808080 128,128,128 
DimGray 暗淡 的 灰色 #696969 105,105,105 
Black 纯 黑 #000000 0,0,0 














第 2 章 
1. 代码 如 下 所 示 。 


< !DOCTYPE html> 
<html> 
<head> 
<metacharset= "UTE- 8"> 
<title></title> 
< /head> 
<body> 
<tableborder= "1"> 
<tr> 
< thheight= "200"width= "100"rowspan= "2"> A< /th> 
<thcolspan= "2"width= "200"height= "100"> B< /th> 
</tr> 
<tr> 
<th>E< /th> 
< throwspan= "2"height= "200"width="100">C< /th> 
</tr> 
<tr> 
<thcolspan= "2"height= "100"> D< /th> 
</tr> 
</table> 
< /body> 
< /html> 


2. 代码 如 下 所 示 。 


<html> 

<head> 

<metacharset= "utf- 8"> 
<title> 复 选 框 < /title> 
< /head> 

<body> 

请 选择 你 喜欢 的 水 果 : 


HiMLS+cS§S3+Javaseript 丽 同 钱 虎 


< form method= "POST" name= "myform"> 
<p>< input type= "checkbox" name= "Cl" value= "ON"> 苹 果 < /p> 
<p> < input type= "checkbox" name= "C2" value= "ON"> 桔 子 < /p> 
<p>< input type= "checkbox" name= "C3" value= "ON"> 芒 果 < /p> 
<p><input type= "submit" value= "提交 " name= "Bl">< /p> 

< /form> 

< /body> 

</html> 


第 3 章 
1~5 ABDCD 6~10 DBCBA 11~15 DBADB 


第 4 章 

一 :1 一 5 BDDDC 6~10 BCACC 11~15 AACDC 
二 、 答 案 略 

第 5 章 

一 、1~5 DAAAB 6~10 ABCAA 11~15 DDCCB 


二 、 答 案 略 
第 6 章 
1. 代码 如 下 所 示 。 


< !DOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
<style> 
div{ 
width:100px; 
height :100px; 
animation:mymove 5s infinite; 
, 
@ keyframes mymove{ 
0O%{ 
background:red; 
} 
S50%{ 
background:yellow; 
} 
100%{ 
background:green; 


二 
</style> 
</head> 


WW 


16~20 


DB 


AAADD 


用 全 他 分 避 同 全 入 各 图 





<body> 
<div>< /div> 
< /body> 
</html> 


2. 代码 如 下 所 示 。 


< !DOCTYPE html> 

<html> 

<head> 

<meta charset= "utf- 8"> 
<style> 

div 

{border- radius:10px; 
Color:#fff; 

text- align:center; 

line- height:65px; 
width:100px; 

height :65px; 
position:relative; 
animation:mymove 5s infinite; 
animation- iteration- count :3; 
-moz- animation- fill- mode:forwards; 
》 

@ keyframes mymove 


0% {background:yellow; left:0px;top:100px;} 
25% {background:teal;left:0px;top:100px;transform:rotate (9deg);} 

50% {background:aqua;left:500px;top:100px;transform:rotate (0deg);} 
75% {background:teal;left:250px;top:100px;} 

100% {background:olive;left:0px;top:100px;transform:rotate (- 360deg);} 
} 

</style> 

< /head> 

<body> 

<div>Css3 动 画 < /div> 
< /body> 

</htm> 


3. 代码 如 下 所 示 。 


<HIML> 
<HEAD> 
< style> 
@ keyframes buttonLight{ 


from{ 


HTMLS+CSS3+JavaSeript 项 肯 开发 


background:rgba (96, 203,27,0.5); 
box- shadow:0 0 5px rgba (255, 255, 255, 0.3) inset,0 0 3px rgba (220, 120, 200,0.5); 
color:red;} 
S50%{ 
background:rgba (196, 203,127,1); 
box- shadow:0 0 5px rgba (155, 255, 255, 0.3) inset,0 0 3px rgba (220, 120, 100,1); 
color:orange;} 
tof 
background:rgba (96,203,27,0.5)7 
box- shadow:0 0 Spx rgba (255,255,255,0.3)inset,0 0 3px rgba (220,120,200,0.5)7 


color:green;} 


.btn{ 
/* 按钮 的 基本 属性 * / 
border- radius:5px; 
/* 调用 animation 属 性 ,从 而 让 按钮 在 载 入 页 面 时 就 具有 动画 效果 * / 
animation:buttonLight5sinfinite; 
}</style> 
< /HEAD> 
<BODY> 
<button class="btn"> 发 光 的 button< /button> 
< /BODY> 
< /HIML> 
第 7 章 
1~5 ABCBC 6~10 AAACC 11~12 DLBD]J 
第 8 章 
1~5 CBDBA 6~10 BDABD 11~15 ACAAA 
第 9 章 
答案 略 
第 10 章 
—“1~5 CBDDD 6~10 BCBAD 
二 、 答 案 略 。 
第 11 章 
答案 略 
第 12 章 
1~5 CDBCD 6~10 CCALAB]A 11~15 CBBLAB]D 16~20 BDCLAC] 
D 21~23 BDC 


Ey 
[2] 
[3] 
[4] 
[5] 
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